Vue中的watch是如何实现深度监听的？

在 Vue 中，可以使用watch选项来监听数据的变化。如果需要深度监听对象中的数据变化，可以使用deep: true选项。例如：

<template>
  <div>
    <input type="text" v-model="obj.a" @input="handleInput" />
    <input type="text" v-model="obj.b" @input="handleInput" />
    <p>{
   {
    obj }}</p>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      obj: {
    a: '', b: '' },
    };
  },
  watch: {
   
    obj: {
   
      handler(newValue, oldValue) {
   
        console.log('obj changed:', newValue, oldValue);
      },
      deep: true,
    },
  },
  methods: {
   
    handleInput(event) {
   
      this.obj[event.target.name] = event.target.value;
    },
  },
};
</script>

在上述示例中，我们使用watch选项监听obj对象的变化。当obj对象中的任何一个属性发生变化时，都会触发handler函数。同时，我们使用deep: true选项开启深度监听，这样当obj对象中的子属性发生变化时，也会触发handler函数。