当前位置： 移动技术网 > IT编程>网页制作>CSS > Vue观察对象的子属性变化，wacth的deep使用

Vue观察对象的子属性变化，wacth的deep使用

2019年05月04日  | 移动技术网IT编程  | 我要评论

西湖龙井茶的特点,国培心得体会,莘业文

vue观察对象的子属性变化，wacth的deep使用

代码如下：


    



<script>
export default {
  name: 'app',
  data(){
    return {
      name:""
    }
  },
  watch:{
    // 观察的属性名
    name(value){
      alert("现在的name是："+value)
    }
  }
}
</script>

显示效果

\

那么我现在观察的不再是name这个属性，而是person对象里面的name呢？我们这个观察又应该怎么做呢？是不是我们将name改成person就可以了呢？

我们先来试试


    姓名：

    年龄：



<script>
export default {
  name: 'app',
  data(){
    return {
      // 由单个属性变成了一个对象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 如果还是按照原来的思路，这里应该是换成person就可以了
    // 观察的属性名
    person(value){
      alert("我的name是："+value.name)
      alert("我的age是："+value.age)
    }
  }
}
</script>

答案显然是不行的，我两个属性都输入了，都没有触发消息弹出

\

好了，回到正题，关键在于watch里面，应该是这么写：

  watch:{
    // 观察的属性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }

其中，deep:true是关键，在vue的文档中有说明：为了发现对象内部值的变化，可以在选项参数中指定deep: true。注意监听数组的变动不需要这么做。

另外一个关键是handler，根据参考的文章所说，watch 方法在编译的时候，会写成handler方法，反正我们当前这么写就对了。

我们现在再来看看效果如何：

输入了name：

\

\

输入age：

\

\

目前，无论是name还是age，只要是person下面的属性被修改了，都会被观察到。

完整代码：


    姓名：

    年龄：



<script>
export default {
  name: 'app',
  data(){
    return {
      // 由单个属性变成了一个对象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 观察的属性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }
}
</script>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网