深度监听（vue中watch的deep）

Posted 2023-04-02

参考技术A

当监听的是对象属性，手动修改对象的某个属性值是会发现，监听并没有生效，此时我们需要用到watch的deep属性，当deep为true时它会一层层遍历给对象的所有属性都加上这个监听函数，这样可以检测到对象的每个属性变化，但是这样做会造成更大的性能开销。

优化： 可以使用字符串监听，即给对象会改变的属性指定该监听器，这样只有遇到该属性才会给其设置监听器，而不是给对象的所有属性都加上监听函数。

例如之前动态修改echarts配置属性中的data值

vue 侦听器watch 之 深度监听 deep

<template>

  <div>
    <p>FullName: person.fullname</p>
    <p>FirstName: <input type="text" v-model="person.firstname"></p>
  </div>

</template>

<script>
    export default 
        data()
            return 
                person: 
                    firstname: ‘Menghui‘,
                    lastname: ‘Jin‘,
                    fullname: ‘‘
                
            
          ,
          watch: 
              person: 
                  handler(n,o)
                      this.person.fullname = n.firstname + ‘ ‘ + this.person.lastname;
                  ,
                  // immediate: true,  //刷新加载 立马触发一次handler
                  // deep: true  // 可以深度检测到 person 对象的属性值的变化
              
          

    
</script>

结果：

handler 方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法  所以fullName是没有值的

---

当修改以上代码，加上immediate: true，组件初始化的时候，侦听器会立马（immediate）触发handler方法

结果：

 

---

 

 

当在输入框中输入数据时， 可以发现fullName的值并没有随之改变

结果：

 

这是因为vue无法检测到对象内部属性值的变化 比如person.firstname的变化

所以此时 需要用到vue的深度监听（deep） 

此时加上代码  deep: true

可以发现 每次输入框数据变化  fullname随之改变

结果：