computed/watch深度监听

在 Vue.js 中，computed 和 watch 是两种处理动态数据变化并触发相应逻辑的方法，但它们的工作方式和用途有所不同。

computed

computed 属性用于声明一个依赖于其它响应式数据（如 data、props 或其他 computed 属性）的属性。当这些依赖发生变化时，computed 属性会重新计算并返回新的值。

computed 属性默认是深度监听的，意味着如果 computed 属性的依赖是一个对象或数组，那么该对象或数组内部的任何变化都会触发 computed 属性的重新计算。

示例：

export default {  data() {  return {  items: [  { id: 1, name: 'Item 1' },  { id: 2, name: 'Item 2' }  ]  };  },  computed: {  // 深度监听 items 数组中的对象变化  totalNamesLength() {  return this.items.reduce((total, item) => total + item.name.length, 0);  }  }  
};

在上面的例子中，如果 items 数组中的任何一个对象的 name 属性发生变化，totalNamesLength computed 属性都会重新计算。

watch

watch 选项用于观察和响应 Vue 实例上的数据变化。默认情况下，watch 是浅监听的，意味着它不会观察到对象内部属性的变化。如果你需要深度监听对象或数组的变化，你需要在 watch 选项的配置中明确指定。

示例：

export default {  data() {  return {  items: [  { id: 1, name: 'Item 1' },  { id: 2, name: 'Item 2' }  ]  };  },  watch: {  // 深度监听 items 的变化  items: {  handler(newVal, oldVal) {  console.log('items changed:', newVal);  },  deep: true // 启用深度监听  }  }  
};

在上面的例子中，由于 deep 选项设置为 true，所以 watch 会深度监听 items 数组的变化，包括数组内部对象属性的变化。