Vue3 学习笔记，如何定义事件以及如何理解响应式( 三 ) _Vue3

Watcher 会调用自己的 update() 方法更新视图。

Watcher 的实现细节较为复杂，下面是一个简化版的 Watcher 类的示例代码，帮助理解其实现原理：

class Watcher {constructor(vm, key, cb) {this.vm = vmthis.key = keythis.cb = cb// 将当前 Watcher 实例指向 Dep.target// 这样 Dep 就能够收集到这个 WatcherDep.target = thisthis.vm[this.key] // 触发 getter，收集依赖Dep.target = null}update() {this.cb.call(this.vm, this.vm[this.key])}}

这个例子中，Watcher 类包含了三个属性：vm、key、cb 。vm 是 Vue 实例，key 是响应式数据的名称，cb 是更新视图的回调函数。
在构造函数中，Watcher 会将自己设置为 Dep.target ，并读取 vm[key] 。这样，在 vm[key] 的 getter 中就能够收集到这个 Watcher 。
update() 方法会在响应式数据发生变化时被调用，更新视图。
Watcher 类还包含其他一些方法，如 addDep()、depend()等，用于维护与 Dep 之间的关系，可以参考 Vue 源码来了解这些方法的具体实现。
希望这些资料能够帮助您更好的理解 Vue 的响应式系统的实现。
延伸阅读：Vue3 响应式的实现逻辑Vue 3 的响应式系统与 Vue 2 的响应式系统有一些不同之处。
Vue 3 引入了一种新的响应式实现方式，叫做 "Proxy based observation" 。它使用了 JavaScript 内置的 Proxy 对象来实现响应式，而不再使用 Object.defineProperty() 。
使用 Proxy 对象可以更简单地实现响应式，并且性能更优，代码实现更简洁。
举个例子，在 Vue 2 中，我们可以这样创建一个响应式对象:

let data = https://www.isolves.com/it/cxkf/qd/2023-12-06/{ count: 0 }Object.defineProperty(data, 'count', {get() {console.log('count get')return count},set(newValue) {console.log('count set')count = newValue}})

而在 Vue 3 中，我们可以这样创建响应式对象:

let data = https://www.isolves.com/it/cxkf/qd/2023-12-06/reactive({ count: 0 })function reactive(obj) {return new Proxy(obj, {get(target, key, receiver) {console.log(`get ${key}`)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log(`set ${key}`)return Reflect.set(target, key, value, receiver)}})}

在Vue3中，还引入了一个叫做"reactivity"的新概念，用于描述一组可响应数据，而不再依赖于组件实例。这样可以让响应式系统更加灵活，更易于实现自定义组件。
总的来说, Vue 3 的响应式系统使用了 JavaScript 内置的 Proxy 对象，并引入了新的 reactivity 概念，提高了响应式系统的灵活性和性能。在 Vue 3 中，每个组件实例都有自己的响应式系统，而不再像 Vue 2 中那样共用一个全局的响应式系统。这样可以更好地支持复杂的组件结构和高性能的响应式系统。
另外，Vue 3 中的响应式系统还支持对 Map 和 Set 等新的数据类型的响应式，这在 Vue 2 中是不支持的。
在 Vue 3 中，响应式系统与虚拟 DOM 结合更紧密，更易于实现高性能的组件。Vue 3 中还引入了新的 Composition API，可以更灵活地编写组件，更好地复用和组合组件逻辑。
总之，Vue 3 的响应式系统是基于 JavaScript 内置的 Proxy 对象实现，更加灵活高效，并支持新的数据类型和更好的组件编写方式。
结束今天的分享就到这里，本篇文章我们一起学习了如何在 Vue 中定义事件，并且介绍了常用的事件。以及什么是响应式，以及 Vue 底层是如何实现响应式的，并对 Vue2 和 Vue3 的实现方式和差异进行了介绍。下一篇文章，我将继续介绍 Vue 其他方面的相关内容，比如计算属性 Computed 和 Watch 属性，敬请期待。

【Vue3 学习笔记，如何定义事件以及如何理解响应式】