computed 和 watch 的区别

computed - 计算属性

根据一些其他计算得来的属性，变成一个属性，好处可以让逻辑变得更加清晰。着重于依赖之间的变化及缓存

缓存：计算属性如果依赖没有变化，就会变成缓存，computed的值就不会重新计算

watch - 监听

当数据变化的时候去执行一个函数，着重于变化的时候去执行，而不是结果

• 提供两个参数 (newVal, oldVal)
  当data变化时，会有一个回调，回调返回两个参数，第一个为新值，第二个为旧值
• 异步 可配合 Vue.nextTick
• 选项:immediate
  默认一开始是空的，无到有是一个出生的过程，不是变化的过程
• 选项:deep
  值的变化：
  • 简单数值类型：值变了就变了

obj:{
    a:'a',
    b:'b'
}

• 对象里的简单类型变了：这时只做值的比较（即对象里的值变了），对象本身不变（内存不变）
  obj.a +=1
• 对象的地址变了：这时vue才会认为对象变了
  obj = {a:'a',b:'b'}
• 如果需要监听对象及其本身属性用：deep:true

watch:{
    obj:{
        handler(){
            console.log("obj 变了")
        },
        deep: true,  //往深了看
        //immediate:true 第一次是否执行
    }
}

注意：watch不要用箭头函数 //这里的this并不会指向Vue实例
watch的语法

watch:{
    o2: function(value,oldValue){},
    o3(){},
    o4: [f1,f2],
    o5: 'methodName',
    o6: {handler:fn, deep:true, immediate:true},
    'obj.a': function(){}
}

vm.$watch('xxx',fn,{deep:.., immediate:..}) 
//'xxx'可以改成一个返回字符串的函数
const vm = new Vue({
    watch:{
        n(){
            console.log('n变了')
        }
    }
})
vm.$watch('n',function(){
    console.log('n变了')
},immediate:true) //两种语法作用相同
//不好看可以,可以写在created(跟DOM无关)，或者mouted
//vm改写成this

小结：

• 如果数据需要通过复杂逻辑来得到结果，那么就推荐使用计算属性computed
• 如果数据需要监听，并在这过程中做一些事情，那么就用watch