yyscc

这一段时间在阅读 Vue 2.6 的源码，太多精妙的设计和写法令人叹为观止。虽然思维导图什么的已经画了很多，整个流程和关键的逻辑已经高通，但是本着纸上学来终觉浅的原则，决定自己动手撸一个 Vue 的简版。 Vue 有几个重要的组成部分 ---> Observe,complier…

最近学习了部分 element-ui 的源码，发现了两个不太熟的 api ---> dispatch 和 broadcast 主要用于触发特定组件的特定方法使用。 通俗来讲，这个方式就是自上而下的广播事件。 这个方法用来父组件在特定的时机像子组件派发一些信息。代码如下： 上面代…

接收 isReadonly（只读） 和 shallow （浅转换为 Reactive---> shallowReactive）两个参数。参数表示生成不同类的 getter 接下来是一系列的判断输入，返回对应的值。 开始的判断是关于类型的判断（ReactiveFlags.IS_R…

为了做依赖的收集，vue3 对这个三个数组的方法进行了一层包装，刚看的时候百思不得其解。因为在使用这三个方法时，同样会遍历数据，这样子做包装的意义在哪呢？思索了良久不得其解，重新刷了这三个方法后才恍然大悟。下面先让我自己重新认识这三个方法，然后再对上面的代码进行分析。 这两个 …

今天朋友给我了一个无限滚动列表的例子，让我分析一波；给的源码来自掘金的大佬 的文章，在这里感谢大佬的分享。 这个 API 的中文名称叫做 “交叉观察期”，意为被观察的元素与可视窗口是否有重合。这么说可能不是很清晰，其实就是检测被观察元素是否出现在屏幕上。 它接收两个参数 cal…

value[ReactiveFlags.SKIP]：ReactiveFlags.SKIP 的值为 '__v_skip' 表示有此属性的值就不能转换为响应式数据，你可以自己手动给你不想转换的数据添加此属性，就会使数据必能进行响应式变换（不建议你这么做，一般自定义组件会有这个属性）…

ref 的用法比较简单，只需要将基本类型的数据传入，通过返回值的 value 属性获取响应式的值即可。 其实他也可以接受复杂数据类型作为参数，但是其内部依然是调用 reactive api 进行的响应式处理，这个过程对用户来说是隐藏的。所以，为了使代码更清晰，你应该使用 ref…

effect 可以说是 vue3.0 依赖收集和触发的关键，众多 api 都或多或少的使用到了这个 api。故此，对它的源码进行了一些阅读，本文为个人学习记录，有错误的地方希望各位大神指出。 先判断传入的 fn 是否已经是 effect 函数（调用 isEffect 进行判断）…

当 a 变化时，对应的回调函数就会执行。 Vue3.0 中的 effect 同样会在响应式数据发生改变时，去执行对象的注册回调。看下面的代码 虽然写法上有所区别，但是核心没有变，数据改变，执行我们期望中的事情（回调）。真要说区别其实也很明显，一个是显式的写入依赖，一个算半显式的…