Skip to content

响应式核心原理


由于Vue3 Reactive源码涉及的代码较多,给初学者学习带来一定的门槛,所以尤大讲解的最核心的响应式demo来讲解响应式核心原理实现

核心原理-流转图


概要内容

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master/img/20210726223603.jpg


疑问解答

  • 为啥要用proxy拦截? ( 请阅读:响应式根基:Object.defineProperty 与 Proxy 拦截区别 )
  • 为啥要用WeakMap?
    • 原因:可被垃圾回收器自动回收,而Map不会被垃圾回收器自动回收,需要手动清理。否则会造成内存泄漏
  • 为啥要用Reflect获取对象属性和设置对象属性?
    • 原因1:保证不管存不存在原型链继承,都能保存操作正确。
    • 原因2:语义更明确,避免异常抛出等

流转步骤讲解

总结

  • watchEffect : 暂存当前匿名函数
  • proxy:对象访问拦截
  • dep:依赖收集

demo 源码:vue-principle-learn

为了方便记牢响应式原理,记住这3个角色便于以后快速回忆起响应式原理。

参考文献

Released under the MIT License.