Vue中的computed与watch的区别

computed

computed（计算属性），顾名思义是通过计算得到的新属性，它根据所依赖的属性动态计算出新的属性结果，并且会将结果缓存下来，其中的原理就是ES6中的getter方法计算得到新属性。

代码示例：

new vue({
    data:{
        n:1,
        m:2,
    },
    template:`
        <div>{{q}}</div>
    `,
    computed:{
        q(){
            return this.m+this.n
        }
    }
})

watch

watch（侦听器），用于监听data，侦听器有value，oldValue两个参数，当监听的某个data发生变化时，就执行一个回调，如果要深层次的监听data，就用deep:true，如果页面一渲染就开始监听，就用immediate：true

代码示例：

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。