28|响应式:万能的面试题,怎么手写响应式系统
大圣
该思维导图由 AI 生成,仅供参考
你好,我是大圣。
经过前面课程的学习,相信你对 Vue3 的实战和组件有了新的认识,也掌握了很多实战秘籍,从今天开始,我将带你进入 Vue 框架的内部世界,探究一下 Vue 框架的原理,让你能知其然,也知其所以然。
响应式
在第三讲的 Vue3 新特性中,我们剖析了 Vue3 的功能结构,就是下图所示的 Vue 核心模块,可以看到,Vue3 的组件之间是通过响应式机制来通知的,响应式机制可以自动收集系统中数据的依赖,并且在修改数据之后自动执行更新,极大提高开发的效率。
我们今天就要自己做一个迷你的响应式原型,希望你能通过自己手写,搞清楚响应式的实现原理。
根据响应式组件通知效果可以知道,响应式机制的主要功能就是,可以把普通的 JavaScript 对象封装成为响应式对象,拦截数据的获取和修改操作,实现依赖数据的自动化更新。
所以,一个最简单的响应式模型,我们可以通过 reactive 或者 ref 函数,把数据包裹成响应式对象,并且通过 effect 函数注册回调函数,然后在数据修改之后,响应式地通知 effect 去执行回调函数即可。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了手写响应式系统的方法,并通过实现一个迷你的Vue框架weiyouyi来揭示Vue框架的原理。文章首先介绍了响应式的概念和作用,以及使用reactive或者ref函数将数据包裹成响应式对象,并通过effect函数注册回调函数实现自动化更新。接着详细讲解了reactive的实现原理,使用ES6中的Proxy特性实现属性拦截,以及配置Proxy的拦截函数,包括get和set操作。文章还介绍了依赖收集和执行的原理,通过targetMap存储依赖关系,并实现了track和trigger函数来收集和触发依赖函数。最后,文章提到了effect函数的包装和依赖函数执行时机的控制。 通过本文,读者可以深入了解Vue框架的原理,掌握响应式系统的实现原理,以及如何手写一个迷你的Vue框架。这对于想深入学习Vue框架的开发者来说是一篇非常有价值的文章。文章还介绍了ref函数、computed函数等的实现原理,为读者提供了更全面的视角。同时,文章还留下了思考题,引发读者对Vue3.2对响应式性能提升的思考。 总的来说,本文内容丰富,深入浅出,适合对Vue框架感兴趣的开发者阅读。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《玩转 Vue 3 全家桶》,新⼈⾸单¥68
《玩转 Vue 3 全家桶》,新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(18)
- 最新
- 精选
- 润培刚刚提了一个PR
作者回复: 给力给力
2021-12-246 - 小胖track函数哪里,依赖的添加,最后老师的判断是有问题的,那样写的话对于一个key就只能添加一次依赖。 // 测试用例改成下面这样,就过不了了 let val let val2 effect(()=>{ val = ret.num }) effect(()=>{ val2 = ret.num }) expect(val).toBe(0) expect(val2).toBe(0)
作者回复: 已经支持这个测试案例了,把deps.add移到!dep的判断外层
2021-12-243 - Kim Yintrack 函数的 20~27 行好像有点问题,感觉应该把 22~26 行移到 if (!deps) 外面,不然 deps = new Set() 以后,if (!deps.has(activeEffect) && activeEffect) 这句判断就没意思了 —— deps.has(activeEffect) 永远为 false
作者回复: 已经加上了这个test,deps.has判断移动到if外面了,灰常感谢提出bug
2021-12-243 - openbilibili你好,问一下,你看的vue是哪个版本的?我对照一些 vue源代码 和 weiyouyi的代码,有些地方不太相同,但是又无法理解。
作者回复: weiyouyi是简版的,我看的代码是3.2之前的版本,3.2之后的响应式会有位运算的优化
2022-01-05 - 润培相比于 Vue2 使用的 Object.defineProperty,Vue3 不需要提前递归收集依赖,初始化的速度更快; Vue2 收集依赖的过程中会产生很多的 Dep 对象,Vue3 可以节省这部分的内存开销; Vue2 无法监听数组、对象的动态添加、删除,需要通过 $set、$delete,增加学习成本; Vue2 无法监听 Set、Map,只能处理普通对象。2021-12-2413
- Geek_13e539computed的讲解还能再详细一点么?看了几次 也还是没太理解2022-01-2018
- 来个offer哪里来的activeEffect?没看到啊2022-06-123
- Hector这一篇搭配《vue.js的设计与实现》真是相得益彰。2022-03-223
- 子阳经过一个星期的学习,终于自己实现了。无比的高兴。继续挑战下一章2022-01-172
- 大将目前所有课程中最有用的一章2024-03-15归属地:北京
收起评论