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归属地：北京
收起评论