Vue 中的计算属性，方法，监听器

计算属性

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

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

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

computed

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

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

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

<div id="app">
    {{fullName}}
    {{age}}
</div>
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

<div id="app">
    {{fullName()}}      //这里调用方法需要加上括号
    {{age}}
</div>
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

<div id="app">
    {{fullName}}
    {{age}}
</div>
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 来实现，因为用这种方法写代码，既简洁，性能又不错。计算属性，方法，监听器