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 数组的变化，包括数组内部对象属性的变化。

总结

• computed 属性默认深度监听其依赖的数据变化，并自动重新计算。
• watch 默认浅监听数据变化，需要设置 deep: true 以启用深度监听。

选择使用 computed 还是 watch 通常取决于你的需求：

• 如果你需要基于已有数据计算新值，并且这个值需要被缓存并在其它地方复用，使用 computed。
• 如果你需要在数据变化时执行异步操作或复杂逻辑，或者仅当数据变化时才触发某些行为，使用 watch。