watch深度监听 deep: true

Posted 2021-10-17 铁锤妹妹@

一. 实例演示

<template>
  <div class="testCon">
   <div class="cell_border_bottom">
      <van-field
         class="paddingLeftNone"
            v-model="form.age"
            name="年龄"
            label="年龄"
            placeholder="请输入"
            input-align="right"
          />
   </div>
   <div class="cell_border_bottom">
     <van-field
        class="paddingLeftNone"
            v-model="testname"
            name="测试姓名"
            label="测试姓名"
            placeholder="请输入"
            input-align="right"
          />
   </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        age: '18'
      },
      testname: 'tom'
    }
  },
  watch: {
    form () {
      console.log(this.form.age)
    },
    testname () {
      console.log(this.testname)
    }
  },
  components: {
    VanField: Field,
  }
}
</script>

<style lang="scss" scoped>

</style>

当我们在输入框中输入数据视图改变form.age的值时，我们发现是无效的。受现代 javascript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。

二. 修改成深度监听 deep：true

  watch: {
    form: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        console.log(this.form.age)
      },
      deep: true  // 可以深度检测到 obj 对象的属性值的变化
    },
    testname () {
      console.log(this.testname)
    }
  },

可以发现，因为加上deep: true，就可以监听到age的变化
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

需要注意的是：

watch监听对象，同时用deep: true深度监听，此时只有对象中的某个值发生改变就会触发

三. 优化到对象某个属性的监听

优化，我们可以是使用字符串形式监听。

 watch: {
    'form.age': {
      handler () {
        console.log(this.form.age)
      }
    },
    testname () {
      console.log(this.testname)
    }
  },

这样Vue.js才会一层一层解析下去，直到遇到属性age，然后才给age设置监听函数。

可参考链接讲的很详细
https://zhuanlan.zhihu.com/p/86273758