uni-app 中 computed 和 watch 的区别是什么？

推荐答案

在 uni-app 中，computed 和 watch 都是用于监听数据变化的工具，但它们的使用场景和机制有所不同。

• computed：用于计算属性，适合处理需要根据其他数据动态计算得出的值。computed 具有缓存机制，只有当依赖的数据发生变化时，才会重新计算。

• watch：用于监听数据的变化，适合处理需要在数据变化时执行异步操作或复杂逻辑的场景。watch 不会缓存结果，每次数据变化时都会触发回调函数。

本题详细解读

computed 的使用场景与特点

1. 计算属性：computed 适用于那些需要根据其他数据动态计算得出的值。例如，计算购物车中商品的总价。

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

2. 缓存机制：computed 具有缓存机制，只有当依赖的数据发生变化时，才会重新计算。这意味着如果依赖的数据没有变化，多次访问 computed 属性时，不会重复计算，而是直接返回缓存的结果。

3. 同步计算：computed 是同步的，适合处理不需要异步操作的场景。

watch 的使用场景与特点

1. 监听数据变化：watch 适用于需要在数据变化时执行某些操作的场景。例如，监听用户输入并进行实时搜索。

   watch: {
     searchQuery(newVal, oldVal) {
       this.fetchSearchResults(newVal);
     }
   }

2. 无缓存机制：watch 不会缓存结果，每次数据变化时都会触发回调函数。这意味着即使数据没有变化，watch 也会执行回调函数。

3. 异步操作：watch 适合处理需要在数据变化时执行异步操作的场景。例如，监听用户输入并发送网络请求。

总结对比