Vue computed与watch的区别

computed

1. computed就是计算属性，是用来计算出一个值的，计算出来的值在调用时不需要加括号，可以直接当属性使用；
2. 它根据依赖的属性，动态计算出新的值，并且会自动缓存，其中的原理就是ES6中的getter方法计算得到新属性。如果依赖不变，则computed的值不会重新计算。

使用场景：一个数据受多个数据影响。

new vue({
    data:{
        n:1,
        m:2,
    },
    template:`
        <div>{{q}}</div> //可直接调用，且调用时不加括号
    `,
    computed:{
        q(){
            return this.m+this.n
        }
    }
})

watch

1. watch就是监听，用于监听data，有value，oldValue两个参数，如果有属性变化就去执行一个函数；
2. watch有两个选项，第一个是immediate，表示是否在第一次渲染时执行这个函数；第二个是deep，表示如果要监听一个对象是否需要看对象内部是否发生变化。

使用场景：一个数据影响多个数据

new vue({
    data:{
        q:{
          n:1,
          m:2,
        },
    },
    template:`
        <div>
            {{q.n}}
            <button @click="q.n += 1">n+1</button>
        </div>
    `,
    watch:{
        q:{
          handler(){
            console.log('data变了')
          },
          immediate:true,
          deep:true,
        },
    },
})

总结

computed和watch都是在依赖或监听的值变化之后执行回调，但是computed是在依赖变化后重新缓存计算属性，watch是在监听的值变化后执行另一个函数。如果数据依赖于其他数据用computed，如果要监听数据变化用watch。