vue3源码解读--data响应式的处理

目录

    vue2源码

    vue3源码

示例

源码

    上一节，我们已经看到了组件被挂载到页面的流程。但是忽略了对options的处理。vue2中是在组件init过程中就对配置项进行了合并处理，vue3中是在组件创建即setupComponent中执行applyOptions做的这个事情

    经过对组件实例的解析操作，最终拿到的dataOptions即我们实例中的data函数。可以看到，在vue3已经不允许根组件定义为对象了

    显然reactive即响应式实现的关键，顺着调用关系找到createReactiveObject函数。常听人提起的Proxy赫然立于眼前

    proxy和Object.defineProperty差不多，都可以拦截对象的访问和修改操作，那么接下来的重点就是看下它是如何做依赖收集和派发更新的即可

    当前targetType=1，使用baseHandlers做处理器，即createGetter函数。当组件render过程中将会触发msg的访问执行到此

    可以看到，如果msg是一个对象，则会递归reactive。为什么要递归处理呢？proxy不是已经把整个对象都代理到了吗？

    写一个例子看一下

        如果正常访问，我没有问题的，每次都可以正确的触发get

        如果是拿到返回值再进行访问的话，res.c就是无效的

        把第二个值也转为Proxy后就可以了

    回到正题，进入track函数

（activeEffect是ReactiveEffect的实例）

    在trackEffects中完成依赖收集

（activeEffect 相当于 vue2 中的watcher）

    同样的，当set newValue时将执行到createSetter。这将执行trigger进行更新派发

总结

    拿到options的data--视情况(如对象递归执行)进行reactive化--在访问时收集依赖(ReactiveEffect)--设置值时派发更新

    proxy.x相当于让activeEffect去订阅data的change，proxy.x = y则相当于data发布更新，通知activeEffect执行componentUpdateFn             --观察者模式