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

置顶

儒雅的烤地瓜

于 2024-01-22 12:31:03 发布

阅读量1.3k

点赞数 11

分类专栏： Vue.js 文章标签： vue.js javascript watch deep immediate 深度监听监听函数

本文链接：https://blog.youkuaiyun.com/sunyctf/article/details/135323713

版权

本文详细比较了Vue中$watch()和watch对象的使用，指出它们在监听值和对象属性变化上的差异，并通过实例演示了如何正确监听对象及启用深度监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    
    // }
}