Vue中$watch()方法和watch属性的区别

vue中$watch()和watch属性都是监听值的变化的，是同一个作用，但是有两个不同写法。

用法一：

//注意：这种方法是监听不到对象的变化的。
this.$watch((newVal,oldVal)=>{ })

用法二：

watch:{
    xxx:(newVal,oldVal)=>{ // xxx是data里的数据
    
    }
    // 写法二：对象方法的简写
    // xxx(newVal,oldVal){ // xxx是data里的数据
    
    // }
}

//监听对象某个值的变化 
watch:{
    "xxx.value":（newVal,oldVal)=>{ // xxx.value是data里对象的value
    
    }
    // 写法二：对象方法的简写
    // "xxx.value"(newVal,oldVal){ // xxx.value是data里对象的value
    
    // }
}

举个栗子：

☀ 参考资料

浅谈Vue中监听属性—watch监听器的使用方法

vue - watch:{}监听与 this.$watch()的区别 | this.$watch 和组件的 watch 有什么区别