vue watch 监听对象的某个属性

最新推荐文章于 2025-06-21 21:23:50 发布

HainesFreeman

最新推荐文章于 2025-06-21 21:23:50 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_41829196/article/details/109036139

vue 专栏收录该内容

119 篇文章

订阅专栏

本文介绍了在Vue.js中如何有效监听对象内的属性变化。通过两种主要方式：一是结合计算属性来监听特定对象属性的变化；二是使用watch配置的deep选项来深入监听对象内部属性的变化。这些方法有助于开发者更好地管理和响应数据变动。

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

新建 userinfo = { name: "小明", age: "18"， }

　 vue中watch监听name的方法

　　1. 可以结合计算属性的方法实现

{

......

watch: {

nm () {

console.log(this.nm)

}

},

computed: {

nm () { return this.userinfo.name }

}

......

}

　　2. 可以通过配置 deep 为true实现

复制代码

// 监听对象的某个值
{
  ......
   watch: {
     'userinfo.name' () {
       console.log(this.nm)
     }
   }
  ......  
}

// 直接监听整个属性，消耗大
{
  ......
   watch: {
     userinfo () {
       handler () {
           console.log(this.nm)
       },
       deep: true
     }
   }
  ......  
}