更新过程
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弥补了这部分的问题。