vue中watch的使用详解

Vue中的watch是一个用于监听数据变化的方法。它可以帮助我们在数据发生变化时执行一些操作，例如更新UI、计算属性等。

deep: true的作用是开启深度监听。默认情况下，watch只会监听数据的第一层变化。如果数据是一个对象或数组，并且其中的属性或元素发生变化，watch不会触发。但是，通过设置deep: true，可以开启深度监听，这样无论数据是对象还是数组，只要其中的属性或元素发生变化，watch都会触发。

需要注意的是，开启深度监听会增加性能开销，因此应该谨慎使用。只在确实需要监听深层数据变化的情况下才开启深度监听。

immediate: true的作用是立即执行回调函数。默认情况下，watch会在数据变化后延迟执行回调函数，直到下一次数据变化才会再次执行。但是，通过设置immediate: true，可以在数据初始化时立即执行回调函数，而不需要等待数据变化。

需要注意的是，开启立即执行回调函数也会增加性能开销，因此应该谨慎使用。只在确实需要在数据初始化时立即执行回调函数的情况下才开启立即执行回调函数。

1、监听基本普通属性

监听基本普通属性

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('消息已更改为：', newVal);
    }
  }
}
</script>

    我们监听了message属性的变化。当用户在输入框中输入内容时，message的值会发生变化，这时我们的watch就会触发，并在控制台输出一条消息

2、监听对象

（1）监听对象需要用到深度监听，设置deep:true

<template>
  <div>
    <input v-model="person.name">
    <p>{{ person.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '',
        age: 20
      }
    }
  },
  watch: {
    person: {
      handler(newVal, oldVal) {
        console.log('person对象已更改');
      },
      deep: true
    }
  }
}
</script>

   我们使用watch来监听person对象的变化。当person对象发生变化时，我们的watch就会触发，并在控制台输出一条消息。通过设置deep: true，我们可以确保监听到嵌套对象属性的变化。如果对象内有多个属性，并采用以上写法，则对象内每个属性都会被侦听，每个属性的变化都会执行一次侦听操作。

（2）可以只监听对象的其中一个属性值 ’对象.属性‘ 的形式

<template>
  <div>
    <input v-model="person.name">
    <p>{{ person.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '',
        age: 20
      }
    }
  },
  watch: {
    'person.name': {
      handler(newVal, oldVal) {
        console.log('name属性发生了变化，新值为：', newVal)
      },
     immediate: true, // 立即执行回调函数
    deep: false // 不深度监听，只监听对象的一级属性
    }
  }
}
</script>

3、监听数组

数组（一维、多维）的变化不需要深度监听，对象数组中对象的属性变化则需要deep深度监听。

 （1）数组（一维、多维）变化

监听数组长度变化
new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  },
  watch: {
    'arr.length': function(newVal, oldVal) {
      console.log('数组长度发生变化，新长度为：', newVal);
    }
  }
});

//监听数组元素的添加和删除
new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  },
  watch: {
    arr: function(newVal, oldVal) {
      if (newVal.length > oldVal.length) {
        console.log('数组元素添加，新元素为：', newVal[oldVal.length]);
      } else if (newVal.length < oldVal.length) {
        console.log('数组元素删除，被删除的元素为：', oldVal[newVal.length]);
      }
    }
  }
});

//监听数组元素的修改
new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  },
  watch: {
    arr: function(newVal, oldVal) {
      for (let i = 0; i < newVal.length; i++) {
        if (newVal[i] !== oldVal[i]) {
          console.log('数组元素修改，索引为', i, '，新值为：', newVal[i], '，旧值为：', oldVal[i]);
          break;
        }
      }
    }
  }
});

//监听数组的排序
new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  },
  watch: {
    arr: function(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        console.log('数组排序，新数组为：', newVal);
      }
    }
  }
});

（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'item1' },
      { name: 'item2' },
      { name: 'item3' }
    ]
  },
  watch: {
    'items': function (newVal, oldVal) {
      // 遍历新值（newVal）中的每个对象
      newVal.forEach(function (item) {
        // 如果对象的 name 属性发生了变化
        if (item.name !== oldVal[item]) {
          // 执行某个操作，例如打印新的 name 值
          console.log('Name changed:', item.name);
        }
      });
    }
  }
})

ps:本人今年才毕业，工作经验也不是太多，闲暇之余写的文章，因为自己也不是太清楚，就写了上面文章，也是为了自己可以更好的学习，有什么不足之处，大家可以指正，也可以让我知道自己的错误，可以学习更多