计算属性

什么是计算属性呢，顾名思义就是计算后的属性，来看一段代码

    
         {
   {firstName + ' ' + lastName}}      //这里展示出来的就是计算属性
    
let vm = new Vue({    el:'#app',    data:{        firstName: 'Dell',        lastName: 'Lee'    }})

从这里可以发现，计算属性是有一些逻辑在里面的，但是我们不想在模版中写复杂的逻辑，模版中只做简单的展示，我们能不能再模版中只做一个简单的展示{

computed

    
         {
   {fullName}}
    
let vm = new Vue({    el:'#app',    data:{        firstName: 'Dell',        lastName: 'Lee'    },    //计算属性    computed:{        fullName(){            return this.firstName + ' ' + this.lastName                }   }})

通过computed方法来写计算属性，fullName最后的值完全是通过firstName和lastName计算得来的。

计算属性有个非常重要的知识点，它是内置缓存的，怎么体现这点呢？

    
         {
   {fullName}}    {
   {age}}
    
let vm = new Vue({    el:'#app',    data:{        firstName: 'Dell',        lastName: 'Lee',        age:28    },    //计算属性    computed:{        fullName(){            console.log('计算了一次')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值时，这句话才会被执行            return this.firstName + ' ' + this.lastName                }   }})

当我更新age时，console.log('计算了一次')没有被执行，而当我更新fullName依赖的值firstName或者lastName时，这句话才会被执行。

除了使用计算属性来计算值以外，还可以用一个方法来实现methods

methods

    
         {
   {fullName()}}      //这里调用方法需要加上括号    {
   {age}}
    
let vm = new Vue({    el:'#app',    data:{        firstName: 'Dell',        lastName: 'Lee',        age:28    },    //方法    methods: {        fullName(){            console.log('计算了一次')        //不管什么数据改变都会执行            return this.firstName + ' ' + this.lastName        }    }})

用这种方法写代码，其实是不如计算属性来的有效的，因为数据只要发生变化，console.log就会被执行，它内部没有缓存机制。

同样一个功能，用计算属性computed可以实现，用方法methods也可以实现，哪一种方式更好一些能，很显然是用计算属性更好些，因为它有缓存，性能更高

除了用计算属性、方法之外，还有没其他方法可以实现的，

watch

    
         {
   {fullName}}    {
   {age}}
    
let vm = new Vue({    el:'#app',    data:{        firstName: 'Dell',        lastName: 'Lee',        fullName: 'Dell Lee'        age:28    },    //方法    watch:{        firstName(){            console.log('firstName 改变了，计算一次')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值 firstName，这句话才会被执行            this.fullName = this.firstName + ' ' + this.lastName        },        lastName(){            console.log('lastName 改变了，计算一次')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值 lastName，这句话才会被执行            this.fullName = this.firstName + ' ' + this.lastName        }    }})

使用watch监听fullName的依赖值，当不是fullName依赖的内容改变时，console.log不会执行，只有当fullName依赖的内容发生改变时，console.log才会被执行。

虽然watch也能实现数据缓存，性能也不错，但相比computed来说，复杂了很多，所以如果一个功能既可以通过computed实现，methods实现，watch实现，优先推荐computed来实现，因为用这种方法写代码，既简洁，性能又不错。计算属性，方法，监听器