Vue的计算属性和监听属性

1、计算属性 computed

当依赖数据发生变化时，计算属性会被重新计算。
有且只有在依赖数据发生变化时它才会重新计算，其他的数据变化对计算属性。
应用场景：数据的计算显示、v-for用v-if的计算。

    <div id="example">
        <div id="demo">{{ fullName }}</div>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                firstName: 'Hello',
                lastName: 'Word'
            },
            computed: {
                // this 指向 vm 实例
                fullName: function () {
                    // 当this.firstName 或 this.lastName 有变化时这个函数会重新执行
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>

2、侦听器 watch

当监听的数据变化时监听函数被执行。
应用场景：数据变更需要变更其他数据。

    <div id="example">
        <div id="demo">{{ fullName }}</div>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Hello',
                lastName: 'Word',
                fullName: 'Hello Word'
            },
            watch: {
                // this 指向 vm 实例
                firstName: function (newVal, oldVal) {
                    // 当this.firstName 有变化时这个函数会重新执行
                    this.fullName = newVal + ' ' + this.lastName
                },
                lastName: function (newVal, oldVal) {
                    // this.lastName 有变化时这个函数会重新执行
                    this.fullName = this.firstName + ' ' + newVal
                }
            }
        })
    </script>

3、计算属性和侦听器的区别

1、计算属性可以简化差值表达式写法；
2、计算属性变量定义在computed中，可以直接使用在｛｝中的，跟methods中函数类似，只不过有利于缓存，性能更好；
3、计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。