vue3.0(双向绑定)源码分析

Posted 2023-03-19

参考技术A vue3.0双向绑定相关的模块有reactive/effect/computed/ref，这篇文章主要聊聊我对它们的理解，以及我在编码中遇到的问题，希望能给大家带来帮助，首先，一张图来分析它们之间的依赖关系。

把数据转化成响应式的数据，获取/修改数据时，能数据进行劫持操作。vue3.0用的ES6的proxy，在此之前用的是Object.defineProperty。这里有两个问题需要注意：1/proxy不会对子对象进行劫持，需要递归。2/新增数据时，set会执行两次，是因为length属性也进行劫持。

利用高阶函数的思想，把effect弄成一个单独可用的函数体，在函数体内，执行回调函数并在外部进行一些逻辑处理。在effect文件中，还暴露了track/trigger。当effect中，存在依赖的数据，会调用reactive文件的get方法，get方法调用track，track函数会把storeEffect中的effect用一种格式存储起来。set方法会调用trigger，trigger会调用get存储的effect。

依赖effect当数据改变时，触发当前的get回调函数，当获取返回值时，返回当前get回调函数的返回值，当设置时，触发set回调函数传递最新值。这里有点需要注意，这里的有个缓存机制，获取相同的值时，get回调函数值触发一次，通过dirty变量实现。

绑定一个非对象类型的数据，直接通过返回对象的get/set方法实现。

项目案例

vuex源码分析（二）——双向数据绑定

参考技术A vuex 中如果 state 发生改变的时候会自动更新视图，此功能是借助 vue 本身的双向绑定功能：

也就是说当组件中读取 this.$store.state.xxx 的时候，实际上读取的是 temp_state 的数据，因为 temp_state 是响应式数据，所以当 vuex 中的 state 更新的时候，会触发视图的更新，相当于通过 class 的访问器属性做了一层代理。

再进一步分析，双向绑定是一个发布订阅模式，在 vue 中，依赖是通过 Object.defineProperty 中的 get 进行收集，也就是当读取属性的时候。在组件中读取 this.$store.state.xxx ，实际读取的是 temp_state ，从而会触发 temp_state 的属性的 get 进行依赖的收集。当数据发生改变的时候，会触发 Object.defineProperty 中的 set ，将收集的依赖进行更新。