Vue 的 `watch` 与 `computed`：介绍、使用与区别 ## 简介在 Vue 应用中，`watch`

简介

在 Vue 应用中，watch 和 computed 是两个非常重要的响应式特性。这两者用于观察和响应 Vue 组件的数据变化，但用法和场景有所不同。

`watch` 的介绍与使用

在 Vue 2.x 中的使用

在 Vue 2.x 中，你可以在组件的 watch 选项中定义要观察的属性。

new Vue({
  data: {
    count: 0
  },
  watch: {
    count: function(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    }
  }
});

在 Vue 3.x 中的使用

在 Vue 3 中，使用 Composition API，你可以使用 watch 和 watchEffect 函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });
  }
}

`computed` 的介绍与使用

请参考上一个问题的回答。

`watch` 与 `computed` 的区别与相关点

主要区别

计算 vs 副作用: computed 主要用于计算值，而 watch 主要用于执行响应式数据变化后的副作用。
缓存性: computed 是缓存的，只在依赖数据改变时重新计算。watch 则会在每次数据变化时运行。
依赖: computed 更加声明性，自动追踪依赖。watch 需要明确指定要观察的属性。

使用场景

使用 computed:
- 当你需要计算属性，而这些属性仅仅依赖于其它响应式对象。
- 当你不需要知道旧值和新值，只关心计算结果。
使用 watch:
- 当你需要在数据改变后执行异步操作或副作用。
- 当你需要在数据改变时，触发一些不产生新值的操作。

总结

watch 和 computed 在 Vue 中都扮演着非常重要的角色，但是根据使用场景和需求来选择使用哪一个是非常重要的。希望这篇文章能帮助你更好地理解这两个特性，以及如何根据具体情况来选择使用它们。

如有更多问题或需要更详细的解释，欢迎随时提问。

Vue 的 `watch` 与 `computed`：介绍、使用与区别

简介

watch 的介绍与使用