大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻💻，关注我，科技未来或许我能帮到你！
computed 和 watch 是 Vue 中最重要的两个API。
下面我们将从 实现原理层面 去深度区分二者，朋友们开搞！
一、使用场景
computed：又叫计算属性，适用于计算值并用于模板显示。
watch：又叫监听器，适用于监听数据变化并执行副作用。
注意，computed 和 watch 都只能监听 Vue 的响应式数据源，都不能直接监听 localStorage 的变化，因为 localStorage 不是 Vue 的响应式数据源。
当然，可以监听 Vue 数据并将其同步到 localStorage，来实现 localStorage 的间接监听。
二、异步处理
1、computed
computed 只能用于同步计算，不能直接处理异步操作。
如果你在 computed 中执行异步操作（例如，调用 setTimeout、Promise 或 async 函数），Vue 会忽略这个异步操作的结果，并且会立即返回计算的结果。
2、watch
watch 可以处理异步操作，并且非常适合在数据变化时执行异步任务。
三、缓存
1、computed
会缓存，只有当依赖的数据真正发生变化时才会重新计算。
2、watch
不会缓存，依赖的数据发生任意变化时都立即执行回调函数。
四、实现原理
1、computed
每个 computed 在创建时会生成一个 Watcher 实例，Watcher 会在计算属性的 getter 被调用时进行依赖收集。
基于懒计算的模式，当一个计算属性首次被访问时，它的值会被计算，并缓存下来。只有当依赖的属性发生改变时，计算属性才会重新计算，否则直接返回缓存的值。
2、watch
每个 watch 在创建时也会生成一个 Watcher 实例，Watcher 会在初始化时会进行依赖收集。
基于事件驱动的模式，只要被监听的数据发生改变，它会立即收到通知并触发预先定义的回调函数。
好了，今天要分享的内容就是这么多，最后感谢朋友们给个点赞、分享、推荐，拜拜~
