1. vue2 使用watch 深度监听一个值
在 Vue 2 中，如果你想深度监听一个对象或数组的属性变化，你可以使用 deep 选项来实现。
这通常用于当你的响应式数据是一个复杂的数据结构（如对象或数组）时，并且你希望在这些数据结构内部发生变化时也能触发监听器。
下面是如何在 Vue 2 中设置一个深度监听的 watch 示例：
1.1. 基本用法
首先，你需要定义一个响应式的对象或数组，在 Vue 实例的 data 属性中声明它：
export default {
data() {
return {
myObject: {
innerValue: 0,
},
};
},
};然后，在 watch 对象中设置一个观察器，指定 deep 为 true：
export default {
data() {
return {
myObject: {
innerValue: 0,
},
};
},
watch: {
myObject: {
handler(newValue, oldValue) {
console.log('myObject changed:', newValue, oldValue);
},
deep: true, // 这里启用深度监听
},
},
};1.2. 注意事项
- 性能影响：深度监听可能会导致性能问题，因为它会递归地监听所有嵌套的属性。如果你知道只有某些特定的属性会改变，考虑只监听那些特定的属性。
- 数组变更检测：Vue.js 通过对象属性的变动来检测变化，但对数组的变更检测有一些限制。对于数组，只有使用变异方法（如 push, splice 等）才会被检测到。如果直接修改索引或长度，需要手动调用 $set 或 $delete 方法。
1.3. 示例代码
这里有一个完整的示例，展示了如何在 Vue 2 中使用深度监听：
new Vue({
el: '#app',
data: {
myObject: {
innerValue: 0,
},
},
watch: {
myObject: {
handler(newValue, oldValue) {
console.log('myObject changed:', newValue, oldValue);
},
deep: true,
},
},
});HTML:
<div id="app">
<button @click="myObject.innerValue += 1">Increment</button>
<p>Current value: {{ myObject.innerValue }}</p>
</div>在这个例子中，每次点击按钮都会更新 innerValue 的值，并且由于我们启用了深度监听，所以 watch 的 handler 函数会被调用。
