Vue中computed 和 watch

vue中computed 和 watch

一、computed

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

<p id="app">  {{fullName}}  </p>
 
<script>
    var vm = new Vue({ V
        el: '#app', 
        data: { 
            firstName: 'Foo', 
            lastName: 'Bar', 
        }, 
        computed: { 
            fullName: function () { 
                return this.firstName + ' ' + this.lastName 
            } 
        } 
    })
</script>

需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。

计算属性默认只有getter，可以在需要的时候自己设定setter：

 computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变

computed 擅长处理的场景: 一个数据受多个数据影响时。

二、watch

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象.

    new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })

如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

waych擅长处理的情况: 一个数据影响多个数据的时候。