![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3源码阅读及复现
文章平均质量分 82
参考Vue.js设计与实现,对Vue框架的源码进行复现,并且思考其设计原理和架构。同时在源码复现过程中学习JavaScript的一些基础。
GoldenFingers
持之以恒!!!
展开
-
4.1 Vue中watch函数的实现原理
例如对post的实现,这表示回调函数会在dom更新之后执行,实现方法是将回调函数放入微任务队列中,这里使用的是。函数,获取变化前后的值,通过调度器调度回调函数的执行时机等。首先要实现的是创建时就立即执行的标记,还是正常使用前面章节中提到的调度器,加入一个。所以我们在处理的时候需要将传入的两种情况兼容一下,其实也很简单,我们可以统一使用。作为侦听属性,他的作用为侦听一个数据的变化,若数据变化则触发相应的回调函数。第二种调度是在Vue3中新增的,设置回调函数的执行时机,一般通过。中的回调函数执行,这其实就是。原创 2023-06-08 16:24:29 · 2062 阅读 · 0 评论 -
3.2 继续完善的Vue.js响应式系统
内的值给取出来,放在新的一个Set中,然后遍历新的Set,这样如果有新加入的值会放入。的执行也在递归过程中逐步指向内层的副作用函数,但是当递归出来的时候,中判断一下,就根据这个死递归的过程,在执行追踪的时候查看副作用函数。,则将副作用函数又插回了副作用函数的执行队列中,效果相当于。会再次执行外层的effect函数,但是实际的结果是什么呢。其实问题就出在trigger函数执行的过程中,这里对于。函数执行输出的前两句是符合预期的,但是第二次修改。的改变导致了副作用函数执行,在执行的过程中有。原创 2023-06-06 10:25:42 · 270 阅读 · 0 评论 -
3.3 具有调度功能的响应式设计
从上述的章节中我们设计了一套响应式系统,但是这个系统有个问题是副作用函数是不可控的,即我们无法控制副作用函数的执行时机和执行次数。其实这些输出结果中的2、3都是过渡状态,是没必要执行的,这些中间状态的控制用调度器是很容易实现的,在Vue中使用的是一个副作用函数的任务执行队列(其实这只是一个简单的调度器,主要是为了展示调度器的功能,即调整执行时机和节省资源,而Vue的完整调度器更加的完善和复杂。模拟),将要执行的副作用函数放入任务队列,但是任务队列的执行是在微任务队列中,这样就如上述所说的调整了执行的顺序。原创 2023-06-07 10:01:22 · 454 阅读 · 0 评论 -
4.0 Vue.js中的computed的设计
并不是响应式数据还是懒执行的,所以也就不会和外层的副作用函数产生联系了,这里解决的方案就是直接手动将计算属性的结果和外层副作用函数联系起来。作为计算属性其作用是描述响应式数据的复杂逻辑计算,当所依赖的响应式数据发生改变时计算属性会重新计算,更新逻辑计算的结果。的值则不会每次都重新计算了,但是这样写有一个非常明显的问题就是我们所依赖的响应式的值改变的时候不会重新计算,所以我们。有个体现计算属性特点的便是比较计算属性和方法的区别,比如我们需要计算两个响应式数据的和。嵌套的问题,当内层的响应式数据只和。原创 2023-06-07 20:25:16 · 582 阅读 · 0 评论 -
3.1 一个稍微完善的Vue.js响应式系统
解决Vue.js响应式系统设计中的副作用函数注册,关于桶的设计,分支切换等问题。原创 2023-05-08 17:33:44 · 733 阅读 · 0 评论 -
3.0 响应式系统的设计与实现
使用Proxy代理和副作用函数实现一个最基本的响应式系统。原创 2023-05-07 10:06:05 · 510 阅读 · 0 评论 -
2.0 Vue框架设计的核心要素
本章主要讲解,一个好的框架在构建的时候,需要考虑到的要素,包含报错信息反馈、警告信息反馈、减少打包体积、良好的输出、特性开关(兼容)等。原创 2023-05-05 15:36:54 · 692 阅读 · 0 评论 -
1.0 Vue的编译和运行
Vue的编译和运行的流程解析,和Vue的编程范式比较。原创 2023-05-04 16:40:44 · 1084 阅读 · 0 评论