Vue3.0源码解析 (二)

1,163 阅读1分钟

更新过程

vue3.0更新的核心基础:采用了es6的Proxy,首先来介绍下Proxy的基础用法。

vue3.0使用reactive来包装响应数据,进行数据劫持。查看源代码中reactivity/reactive.ts文件,找到reactive函数。

reactive函数,将target数据包装为proxy类型,当通过proxy修改数据时,就会进入相应的劫持操作。如果数据为Object、Array类型,执行baseHandlers方法;如果数据为Map、Set、WeakMap、WeakSet类型的时候,执行collectionHandlers方法。

查看reactivity/baseHandlers.ts,查看其中的get劫持逻辑。

track方法修改了targetMap对象,并执行trackEffects方法,trackEffects方法维护了dep与activeEffect的关系,而activeEffect来自于组件安装时的processComponent方法忠定义的ReactiveEffect对象。

当修改target的值的时候,被set方法拦截,除了修改值的逻辑之外,还会触发trigger函数,trigger函数会检测targetMap在组件安装过程中存储的reactiveEffect对象,并触发reactiveEffect的scheduler方法或者run方法。

这时候就会重新调用componentUpdateFn方法,走patch刷新,从而进行dom的刷新流程。

总结

vue2使用defineProperty进行数据劫持,会有新添加key、复杂数据无法检测更改的问题,vue3使用Proxy弥补了这部分的问题。