关于前端:如何在不看源码情况下学petitevue源码

241次阅读

共计 2003 个字符,预计需要花费 6 分钟才能阅读完成。

大家好,我是卡颂。

周末没啥事,筹备找个优良且代码量不多的库学习下。最终抉择了最近公布的 petite-vue,起因如下:

  • 代码量少(只有 5.8kb),且源码模块化水平高(相比于React),易读
  • 基于 Vite 构建,执行 yarn dev 就能开始调试源码
  • 没有 虚构 DOM、编译时计划,能够作为读 Vue 源码的铺垫
  • 底层的响应式更新原理同样实用于 MobxSolidJS 等库,一次浏览多份播种

就决定是他了。

然而周末工夫这么贵重,而且我都 4 年没用过 Vue 了,如何能力高效学习源码呢?

最好是 在不看源码的状况下把源码学了

接下来,我以 petite-vue 为例为大家示范学源码的正确姿态。

怎么快怎么来

能够将 petite-vue 了解为:用实在 DOM 取代 Vue 模版的繁难Vue

比方如下Demo

<script type="module">
  import {createApp} from '../src'
  createApp({count: 0}).mount()
</script>

<div v-scope>
  <button @click="count++">add 1</button>
  <p>{{count}}</p>
</div>  

div及其子孙节点是实在的 DOM 标签,所以页面初始化时如下:

接着执行如下代码,实现 petite-vue 初始化:

createApp({count: 0}).mount()

此时页面:

读框架源码切忌一上手就从入口函数一路调试,很容易就懵逼了。正确的形式是像剥洋葱一样一层一层剥开:

所以,让咱们先从 Performance 面板看看 首屏渲染 的调用栈:

调用栈大体分为蓝框、红框两局部,先看右边蓝框局部:

通过 createContextreactive关键词判断大略是创立 响应式上下文 。至于 响应式 的含意,咱们还不分明。

接着看左边红框局部:

从调用栈深度、页面渲染的成果咱们猜想,这部分做的工作包含:

  • 遍历DOM
  • 实现数据与视图的双向绑定
  • 初始化渲染

接下来,咱们来验证猜测。

留神,到目前为止,咱们一行源码都还没看

验证遍历 DOM

调用栈中 walkwalkChildren被调用屡次,大概率他们就是具体遍历工作执行的办法,让咱们确认下。

在源码 walk 办法中打上log

export const walk = (node: Node, ctx: Context): ChildNode | null | void => {console.log('walk', node);
  // ...  
}

排除换行符 "\n" 对应的文本节点,打印程序如下:

walk div
walk <button>add 1</button>
walk "add 1"
walk <p>0</p>
walk "0"

从打印后果看,这是个 深度优先遍历(如果有子节点就遍历子节点,没有子节点就遍历兄弟节点)

显然,petite-vue mount时采纳 深度优先遍历 ,并对遍历到的每个与 上下文状态 相干的 DOM 节点进行解决。

Demo 中,上下文蕴含状态{count: 0}

createApp({count: 0}).mount()

在遍历后 <p>{{count}}</p> 变为<p>0</p>

确定双向绑定的粒度

接下来咱们须要确认双向绑定的作用范畴,即:

触发更新后,多大范畴的 DOM 会被从新遍历并执行相应 DOM 操作?

关上 Performance 后,点击 <button>add 1</button> 触发更新:

能够看到,没有任何 walkwalkChildren(或相似遍历过程),只调用了reactiveEffect 一个办法就更新了DOM

这意味着 mount 时的深度优先遍历建设了 状态 更新 DOM 的办法 之间一一对应的关系。

因为对应关系确定了,就不再须要额定的遍历过程确定须要变动的DOM

当更新 状态 后,只须要找到与他有关系的 更新 DOM 的办法 执行就行。

比方:将 count 状态与如下函数建立联系:

function setCount(value) {p.textContent = value;}

每当 count 变动后调用 setCount(count) 就能更新 p 对应DOM

所以,petite-vue的工作原理,次要包含两点:

  1. mount时深度优先遍历 DOM,对有状态的DOM(比方<p>{{count}}</p>)建设 状态 更新 DOM 的办法 之间一一对应的关系
  2. update时找到该 状态 对应的 更新 DOM 的办法 并执行

能够看到,即便不深刻源码,也能大体理解工作流程。

如果你想更进一步,比方理解 关系是如何建设的 (波及到 响应式更新),那么就须要深刻源码了。

这里举荐 Vue MasteryVue 3 Reactivity课程,能够补齐 响应式更新 这块常识。

总结

本文介绍了简单框架源码的浏览方法 —— 即从形象到具体。

  1. mount 时与 update 时的调用栈推导出 整体工作流程
  2. 整体工作流程 中发现外围常识 —— 响应式更新

当把握 整体工作流程 响应式更新 后,再浏览本人感兴趣的局部才不至于陷入宏大的代码量中。

你,学废了么?

正文完
 0