尤雨溪的5KB petite-vue源码解析

写在开头

• 近期尤雨溪发布了5kb的petite-vue,好奇的我,clone了他的源码，给大家解析一波。
• 最近由于工作事情多，所以放缓了原创的脚步！大家谅解
• 想看我往期手写源码+各种源码解析的可以关注我公众号看我的GitHub,基本上前端的框架源码都有解析过

正式开始

petite-vue是只有5kb的vue,我们先找到仓库，克隆下来

克隆下来后发现，用的是vite + petite-vue + 多页面形式启动的

启动命令：

然后打开即可看到页面:

保姆式教学

项目已经启动了，接下来我们先解析下项目入口,由于使用的构建工具是vite,从根目录下的index.html人口找起：

这就是多页面模式+vue+vite的一个演示项目，我们找到一个简单的演示页commits:

可以看到页面顶部引入了

开始从源码启动函数入手

启动函数为createApp,找到源码:

Document.currentScript 属性返回当前正在运行的脚本所属的 <script> 元素。调用此属性的脚本不能是 JavaScript 模块，模块应当使用 import.meta 对象。

上面这段代码意思是，创建变量记录当前运行的脚本元素，如果存在制定属性，那么就调用createApp和mount方法.

但是这里项目里面是主动调用了暴露的方法，我们去看看这个方法的源码，有大概80行代码

import { reactive } from '@vue/reactivity'
import { Block } from './block'
import { Directive } from './directives'
import { createContext } from './context'
import { toDisplayString } from './directives/text'
import { nextTick } from './scheduler'

export default function createApp(initialData?: any){
...
}

createApp方法接收一个初始数据，可以是任意类型，也可以不传。这个方法是入口函数，依赖的函数也比较多，我们要静下心来。这个函数进来就搞了一堆东西

上面这段代码，是创建了一个ctx上下文对象，并且给它上面赋予了很多属性和方法。然后提供给createApp返回的对象使用

createContext创建上下文:

根据传入的父对象，做一个简单的继承，然后返回一个新的对象。

我一开始差点掉进误区，我写这篇文章，是想让大家明白简单的vue原理，像上次我写的掘金编辑器源码解析，写得太细，太累了。这次简化下，让大家都能懂，上面这些东西不重要。这个createApp函数返回了一个对象：

return {
  directive(name: string, def?: Directive) {
      if (def) {
        ctx.dirs[name] = def
        return this
      } else {
        return ctx.dirs[name]
      }
    },
mount(el?: string | Element | null){}...,
unmount(){}...
}

对象上有三个方法，例如指令就会用到的属性和方法。所以上面一开始搞一大堆东西挂载到上，是为了给下面的方法使用

重点看mount方法:

首先会判断如果传入的是string,那么就回去找这个节点，否则就会找document

定义roots,一个节点数组

如果有v-scope这个属性，就把el存入数组中，赋值给roots,否则就要去这个el下面找到所以的带v-scope属性的节点，然后筛选出这些带v-scope属性下面的不带v-scope属性的节点,塞入roots数组

在把roots处理完毕后，开始行动。

这个构造函数是重点，将节点和上下文传入以后，外面就只是去除掉'v-cloak'属性，这个mount函数就调用结束了，那么怎么原理就隐藏在里面。

这里带着一个问题，我们目前仅仅拿到了el这个dom节点，但是vue里面都是模板语法，那些模板语法是怎么转化成真的dom呢？

• Block原来不是一个函数，而是一个class.

在constructor构造函数中可以看到

以上代码可以分为三个逻辑

walk

• 会先根据nodetype进行判断，然后做不同的处理
• 如果是一个element节点,就要处理不同的指令，例如v-if

这里有一个工具函数要先看看

这个函数意思是检测下这个节点是否包含的属性，然后返回这个结果并且删除这个属性

拿v-if举例，当判断这个节点有v-if属性后，那么就去调用方法处理它，并且删除掉这个属性（作为标识已经处理过了）

v-if处理函数大概60行

首先_if函数先拿到el节点和exp这个v-if的值，以及ctx上下文对象

如果为空的话报出警告

然后拿到el节点的父节点，并且根据这个exp的值创建一个comment注释节点（暂存）并且插入到el之前，同时创建一个branches数组，储存exp和el

Comment 接口代表标签（markup）之间的文本符号（textual notations）。尽管它通常不会显示出来，但是在查看源码时可以看到它们。在 HTML 和 XML 里，注释（Comments）为 '<!--' 和 '-->' 之间的内容。在 XML 里，注释中不能出现字符序列 '--'。

接着创建elseEl和elseExp的变量，并且循环遍历搜集了所有的else分支，并且存储在了branches里面

这样Branches里面就有了v-if所有的分支啦,这里可以看成是一个树的遍历（广度优先搜索）

接下来根据副作用函数的触发，每次都去branches里面遍历寻找到需要激活的那个分支，将节点插入到parentNode中，并且返回nextNode即可实现v-if的效果

 // process children first before self attrs
  walkChildren(el, ctx)


const walkChildren = (node: Element | DocumentFragment, ctx: Context) => {
let child = node.firstChild
while (child) {
  child = walk(child, ctx) || child.nextSibling
}
}

当节点上没有之类的属性时，这个时候就去取他们的第一个子节点去做上述的动作，匹配每个之类的指令

如果是文本节点

else if (type === 3) {
    // Text
    const data = (node as Text).data
    if (data.includes('{{')) {
      let segments: string[] = []
      let lastIndex = 0
      let match
      while ((match = interpolationRE.exec(data))) {
        const leading = data.slice(lastIndex, match.index)
        if (leading) segments.push(JSON.stringify(leading))
        segments.push(`$s(${match[1]})`)
        lastIndex = match.index + match[0].length
      }
      if (lastIndex < data.length) {
        segments.push(JSON.stringify(data.slice(lastIndex)))
      }
      applyDirective(node, text, segments.join('+'), ctx)
    }

这个地方很经典，是通过正则匹配，然后一系列操作匹配，最终返回了一个文本字符串。这个代码是挺精髓的，但是由于时间关系这里不细讲了

applyDirective函数

接下来nodeType是11意味着是一个Fragment节点，那么直接从它的第一个子节点开始即可

nodeType 说 明

此属性只读且传回一个数值。
有效的数值符合以下的型别：
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION

梳理总结

• 拉取代码
• 启动项目
• 找到入口createApp函数
• 定义ctx以及层层继承
• 发现block方法
• 根据节点是element还是text分开做处理
• 如果是text就去通过正则匹配，拿到数据返回字符串
• 如果是element就去做一个递归处理，解析所有的v-if等模板语法，返回真实的节点 这里所有的dom节点改变，都是直接通过js操作dom

有趣的源码补充

这里的nextTick实现，是直接通过promise.then