Vue中computed和watch的区别

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个或多个数据（称它们为依赖数据）发生变化的时候，所有依赖这些数据的 “相关” 数据 “自动” 发生变化，也就是自动调用相关的函数去实现数据的变动。

（1）computed

1、 支持缓存，只有依赖数据发生改变，才会重新进行计算；

2、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

3、 相当于监听多个数据，只要其中有一个数据改变，就出发重新计算，如果数据没改变就用缓存里面的

注意：就算data中没有直接声明要计算的变量，也可以直接在computed中写入，如下示例：

<p id="app">  {{fullName}}  </p>

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

这个fullname不在data里面

（2）watch

1、不支持缓存，数据改变，直接会触发相应的操作；

2、支持异步操作；

3、watch是监听器，只可以监听某一个数据，然后执行相应的操作；

4、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (newVal,oldVal) {
                this.fullName = newVal + ' ' + this.lastName
                console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo
            },
            lastName: function (newVal,oldVal) {
                this.fullName = this.firstName + ' ' + newVal
                console.log(newVal+'========='+oldVal)//Baraaaa=========Bar
            }
        }
    })

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

总结：
1、当多个属性影响一个属性的时候，建议用computed

2、当一个值发生变化之后，会引起一系列的操作（改变其他属性值），这种情况就适合用watch

3、如果一个数据需要经过复杂计算就用 computed

4、如果在数据变化时执行异步或开销较大的操作时就用 watch