最近看了Vue 3 的官方文档，研究了一下 计算属性 & watch & watchEffect,不得不说，Vue3相对于Vue2在API的改进上有了很大的提升。为了方便不愿意读官方文档的掘友，与加深自己对其理解的深度，遂出了这篇文章，有不足与差错之处，欢迎大家指正。
computed、watch、watchEffect的使用频率是相当之高的。
computed
computed是一个老生常谈的问题，相信大家对其的使用已经不再陌生。但在Vue3的组合式API中，它的使用需要在Vue实例中进行导入：
import { computed } from "vue";
之后它的使用是声明性的（声明性地计算衍生值）：
const isSuccessInfo = computed(() => { return form.percentage > 90 ? 100 : form.percentage; })
computed()方法接受一个回调函数作为参数，返回值为一个计算属性ref，ref在Vue3中通过.value来访问计算之后的结果，但是在模板中使用是，计算属性ref在模板中会自动解包，因此在模板表达式中引用时无需添加.value。
computed与watch的使用区别： 前者是适用于在模板表达式中引用根据响应式依赖发生变化的表达式，具有缓存进而提升页面性能的监听方法。
watch
watch的使用方式在Vue3中与computed是一样的(Vue3对APi的使用方式进行了统一)。
import { watch } from "vue";
它的使用是在组件状态发生更改时执行的依赖，或者可以说是脚本（官方文档称之为副作用）。
watch(form, (a, b) => { // 副作用。 })
官方对于watch的第一个参数有如下概述：
“watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。”
注意的是watch是不能直接监听响应式对象的属性值，如果这样的话，watch得到的参数将会是一个属性值。可以通过返回该属性的getter函数来实现监听。反之，可以通过第三个参数{ deep: true }来实现。
watch与computed的使用区别： 后者是适用于当前组件实例状态发生变化时执行的脚本、副作用，或者通俗的讲可以干其他的事情。
watchEffect
使用方法：
import { watchEffect } from "vue";
watchEffect可以看作是watch+immediate的使用，它创建即执行，并自动追踪依赖，不需要源值。
watchEffect与watch的区别： watchEffect在性能上要优于watch，因为它只跟踪回调中被使用到的属性，而不是递归的跟踪所有的属性。 另外补充官方文档的说明：
"watch会避免在发生副作用时追踪依赖，因此我们更加精确地控制回调函数的触发时机。"
"watchEffect则会在副作用发生期间追踪依赖，它会在同步执行过程中，自动追踪所有能访问到的响应式属性。"
以上就是自己关于自己对watch、watchEffect，computed的理解。当然个人认为本文只是大概的了解，告诉你该如何使用它们，并在正确的业务时使用谁，还有进阶的了解，大家可以看官方的文档：关于使用它们之后获取更新后的DOM的使用方法，和如何停止侦听器。
