Vue 中如何使用 computed 和 watch 优化性能？

推荐答案

在 Vue 中，computed 和 watch 都可以用于监听数据变化并执行相应的逻辑，但它们的使用场景和性能优化方式有所不同。

使用 computed 优化性能

• 缓存机制：computed 属性是基于它们的依赖进行缓存的。只有当依赖的数据发生变化时，computed 属性才会重新计算。这种缓存机制可以避免不必要的计算，提升性能。
• 适用场景：当需要根据某些数据动态计算出一个新值时，使用 computed 是最佳选择。例如，根据用户输入过滤列表数据。

computed: {
  filteredList() {
    return this.list.filter(item => item.includes(this.searchText));
  }
}

使用 watch 优化性能

• 异步操作：watch 适用于监听某个数据的变化并执行异步操作或复杂逻辑。由于 watch 不会缓存结果，因此适合处理需要即时响应的场景。
• 深度监听：通过设置 deep: true，watch 可以监听对象或数组内部的变化，适用于需要深度监听数据的场景。

// www.javascriptcn.com code example
watch: {
  searchText: {
    handler(newVal, oldVal) {
      this.fetchData(newVal);
    },
    immediate: true // 立即执行一次
  },
  someObject: {
    handler(newVal, oldVal) {
      this.handleObjectChange(newVal);
    },
    deep: true // 深度监听
  }
}

本题详细解读

computed 的缓存机制

computed 属性的缓存机制是其性能优化的核心。Vue 会在依赖的数据没有变化时，直接返回缓存的结果，而不是重新计算。这种机制特别适合处理那些依赖多个数据源的计算逻辑。

例如，假设有一个购物车的总价计算：

computed: {
  totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }
}

在这个例子中，totalPrice 只有在 items 或其内部的 price 或 quantity 发生变化时才会重新计算，否则直接返回缓存的结果。

watch 的异步处理

watch 更适合处理那些需要异步操作或复杂逻辑的场景。例如，当用户输入搜索关键词时，可能需要发起一个网络请求来获取搜索结果：

// www.javascriptcn.com code example
watch: {
  searchText(newVal) {
    this.debouncedFetchData(newVal);
  }
},
methods: {
  debouncedFetchData: _.debounce(function(searchText) {
    this.fetchData(searchText);
  }, 300)
}

在这个例子中，watch 监听 searchText 的变化，并使用防抖函数 debounce 来减少频繁的网络请求，从而优化性能。

watch 的深度监听

当需要监听一个对象或数组内部的变化时，可以使用 deep: true 选项。例如，监听一个表单对象的变化：

watch: {
  formData: {
    handler(newVal) {
      this.saveFormData(newVal);
    },
    deep: true
  }
}

在这个例子中，formData 对象的任何属性变化都会触发 handler 函数，从而执行保存操作。

总结

• computed：适合基于依赖数据的缓存计算，避免不必要的重复计算。
• watch：适合处理异步操作、复杂逻辑或需要深度监听的场景。

通过合理使用 computed 和 watch，可以有效地优化 Vue 应用的性能。