vue watch监听对象中部分属性的变化。而不是全部属性。

最新推荐文章于 2024-10-30 11:41:35 发布

先吃口饭

最新推荐文章于 2024-10-30 11:41:35 发布

阅读量409

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46071192/article/details/130616454

版权

在Vue.js应用中，为避免监听并修改同一字段导致的死循环，可以使用computed属性来提取需要监听的字段，然后在watch中对这些字段进行处理。通过定义computed的lists方法，将要监听的curData对象的field1和field2字段分离出来，然后在watch里观察lists的变化，从而实现安全的数据监听和更新。

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

需求：

需要监听并修改对象中的某个字段；并且不能监听需要修改的字段，要不然会陷入死循环；

实现思路：

利用computed计算属性提取需要监听的字段。

computed：{
    lists(){ // 利用计算属性提取需要监听的字段
        const { field1,field2 } = this.curData
        return { field1,field2 }
    }
},
watch:{
    lists(val){ // 监听计算属性
        console.log(val)
    }
    
}