Vue系列教程（13）- 计算属性（computed）

1. 引言

通过前面的章节，我们已经学会了使用Axios通信框架来进行网络请求，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》

本文主要讲解的是vue的另外一种属性computed（计算属性）。

2. 计算属性

计算属性（computed） ：是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，可以想象为缓存!

2.1 案例

先上代码：

DOCTYPE html>



    
    Title
    
    
    
    
        [v-cloak] {
            display: none;
        }
    



   

    
        
    {{message}}
    currentTime1:{{currentTime1()}}
    currentTime2:{{currentTime2}}



    
         const vm = new Vue({
        el: "#app",
        data: {
            message: ""
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
            currentTime2: function () {//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                // this.message;
                return Date.now();//返回一个时间戳
            }
        }
    })
    

运行结果： 描述：

• currentTime1会随着输入框的改变而改变
• 因为computed里面的数据没有变化，每次显现的结果都是第一次缓存下来的

注意了，在computed里的currentTime2方法把this.message给注释了，现在把this.message解注释掉，看看效果。

可以看到，随着输入框的内容改变，currentTime1和currentTime2都改变了，这是为什么呢？原因是this.message是为了能够让currentTime2观察到数据变化而变化。

3. 小结

注意：

• methods和computed里的东西不能重名
• methods：定义方法， 调用方法使用currentTime1()， 需要带括号
• computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。