保姆式教学｜尤雨溪的5KB petite-vue源码解析

心已赠人 2022-09-01 11:57 202阅读 0赞

#### 写在开头 ####

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

#### 正式开始 ####

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

https://github.com/vuejs/petite-vue

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

git clone https://github.com/vuejs/petite-vue
    cd /petite-vue
    npm i 
    npm run dev

*  然后打开`http://localhost:3000/`即可看到页面:

![8e598dea0535c6522683028e270aa631.png][]

--------------------

#### 保姆式教学 ####

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

<h2>Examples</h2>
    <ul>
      <li><a href="/examples/todomvc.html">TodoMVC</a></li>
      <li><a href="/examples/commits.html">Commits</a></li>
      <li><a href="/examples/grid.html">Grid</a></li>
      <li><a href="/examples/markdown.html">Markdown</a></li>
      <li><a href="/examples/svg.html">SVG</a></li>
      <li><a href="/examples/tree.html">Tree</a></li>
    </ul>
    
    <h2>Tests</h2>
    <ul>
      <li><a href="/tests/scope.html">v-scope</a></li>
      <li><a href="/tests/effect.html">v-effect</a></li>
      <li><a href="/tests/bind.html">v-bind</a></li>
      <li><a href="/tests/on.html">v-on</a></li>
      <li><a href="/tests/if.html">v-if</a></li>
      <li><a href="/tests/for.html">v-for</a></li>
      <li><a href="/tests/model.html">v-model</a></li>
      <li><a href="/tests/once.html">v-once</a></li>
      <li><a href="/tests/multi-mount.html">Multi mount</a></li>
    </ul>
    
    <style>
      a {
        font-size: 18px;
      }
    </style>

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

*  可以看到页面顶部引入了

import { createApp, reactive } from '../src'

#### 开始从源码启动函数入手 ####

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

//index.ts
    export { createApp } from './app'
    ...
    import { createApp } from './app'
    
    let s
    if ((s = document.currentScript) && s.hasAttribute('init')) {
      createApp().mount()
    }

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

*  上面这段代码意思是，创建`s`变量记录当前运行的脚本元素，如果存在制定属性`init`，那么就调用createApp和mount方法.
 *  但是这里项目里面是主动调用了暴露的`createApp`方法，我们去看看`createApp`这个方法的源码，有大概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方法接收一个初始数据，可以是任意类型，也可以不传。这个方法是入口函数，依赖的函数也比较多，我们要静下心来。这个函数进来就搞了一堆东西

createApp(initialData?: any){
       // root context
      const ctx = createContext()
      if (initialData) {
        ctx.scope = reactive(initialData)
      }
    
      // global internal helpers
      ctx.scope.$s = toDisplayString
      ctx.scope.$nextTick = nextTick
      ctx.scope.$refs = Object.create(null)
    
      let rootBlocks: Block[]
    
    }

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

export const createContext = (parent?: Context): Context => {
      const ctx: Context = {
        ...parent,
        scope: parent ? parent.scope : reactive({}),
        dirs: parent ? parent.dirs : {},
        effects: [],
        blocks: [],
        cleanups: [],
        effect: (fn) => {
          if (inOnce) {
            queueJob(fn)
            return fn as any
          }
          const e: ReactiveEffect = rawEffect(fn, {
            scheduler: () => queueJob(e)
          })
          ctx.effects.push(e)
          return e
        }
      }
      return ctx
    }

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

> 我一开始差点掉进误区，我写这篇文章，是想让大家明白简单的`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(){}...
    }

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

mount(el?: string | Element | null) {
         if (typeof el === 'string') {
            el = document.querySelector(el)
            if (!el) {
              import.meta.env.DEV &&
                console.error(`selector ${el} has no matching element.`)
              return
            }
          }
         ...
        
         }

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

el = el || document.documentElement

*  定义`roots`,一个节点数组

let roots: Element[]
         if (el.hasAttribute('v-scope')) {
           roots = [el]
         } else {
           roots = [...el.querySelectorAll(`[v-scope]`)].filter(
             (root) => !root.matches(`[v-scope] [v-scope]`)
           )
         }
         if (!roots.length) {
           roots = [el]
         }

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

> 此时如果`roots`还是为空，那么就把`el`放进去。这里在开发模式下有个警告：`Mounting on documentElement - this is non-optimal as petite-vue`,意思是用`document`不是最佳选择。

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

rootBlocks = roots.map((el) => new Block(el, ctx, true))
          // remove all v-cloak after mount
          ;[el, ...el.querySelectorAll(`[v-cloak]`)].forEach((el) =>
            el.removeAttribute('v-cloak')
          )

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

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

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

![cdc57f7e64a5afaf0e87f02436de0c8e.png][]

*  在constructor构造函数中可以看到

constructor(template: Element, parentCtx: Context, isRoot = false) {
        this.isFragment = template instanceof HTMLTemplateElement
    
        if (isRoot) {
          this.template = template
        } else if (this.isFragment) {
          this.template = (template as HTMLTemplateElement).content.cloneNode(
            true
          ) as DocumentFragment
        } else {
          this.template = template.cloneNode(true) as Element
        }
    
        if (isRoot) {
          this.ctx = parentCtx
        } else {
          // create child context
          this.parentCtx = parentCtx
          parentCtx.blocks.push(this)
          this.ctx = createContext(parentCtx)
        }
    
        walk(this.template, this.ctx)
      }

*  以上代码可以分为三个逻辑
 *   *  创建模板`template`（使用clone节点的方式，由于`dom`节点获取到以后是一个对象，所以做了一层clone）
     *  如果不是根节点就递归式的继承`ctx`上下文
     *  在处理完ctx和Template后，调用`walk`函数
 *  `walk`函数解析：

![04090b12c54d7b542c4748e750ad0fd3.png][]

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

![ec11d75ff08ba496ef4eb2790e0dfb53.png][]

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

export const checkAttr = (el: Element, name: string): string | null => {
      const val = el.getAttribute(name)
      if (val != null) el.removeAttribute(name)
      return val
    }

*  这个函数意思是检测下这个节点是否包含`v-xx`的属性，然后返回这个结果并且删除这个属性
 *  拿`v-if`举例，当判断这个节点有`v-if`属性后，那么就去调用方法处理它，并且删除掉这个属性（作为标识已经处理过了）

> 这里本了我想12点前睡觉的，别人告诉我只有5kb,我想着找个最简单的指令解析下，结果每个指令代码都有一百多行，今晚加班到九点多，刚把微前端改造的上了生产，还是想着坚持下给大家写完吧。现在已经凌晨了

*  `v-if`处理函数大概60行

export const _if = (el: Element, exp: string, ctx: Context) => {
    ...
    }

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

if (import.meta.env.DEV && !exp.trim()) {
        console.warn(`v-if expression cannot be empty.`)
      }

*  如果为空的话报出警告
 *  然后拿到el节点的父节点，并且根据这个exp的值创建一个comment注释节点（暂存）并且插入到el之前，同时创建一个branches数组，储存exp和el

const parent = el.parentElement!
      const anchor = new Comment('v-if')
      parent.insertBefore(anchor, el)
    
      const branches: Branch[] = [
        {
          exp,
          el
        }
      ]
    
      // locate else branch
      let elseEl: Element | null
      let elseExp: string | null

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

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

while ((elseEl = el.nextElementSibling)) {
        elseExp = null
        if (
          checkAttr(elseEl, 'v-else') === '' ||
          (elseExp = checkAttr(elseEl, 'v-else-if'))
        ) {
          parent.removeChild(elseEl)
          branches.push({ exp: elseExp, el: elseEl })
        } else {
          break
        }
      }

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

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

> 这里由于都是html,给我们省去了虚拟dom这些东西,可是上面仅仅是处理单个节点，如果是深层级的`dom`节点，就要用到后面的深度优先搜索了

// 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
      }
    }

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

##### 如果是文本节点 #####

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`函数

const applyDirective = (
      el: Node,
      dir: Directive<any>,
      exp: string,
      ctx: Context,
      arg?: string,
      modifiers?: Record<string, true>
    ) => {
      const get = (e = exp) => evaluate(ctx.scope, e, el)
      const cleanup = dir({
        el,
        get,
        effect: ctx.effect,
        ctx,
        exp,
        arg,
        modifiers
      })
      if (cleanup) {
        ctx.cleanups.push(cleanup)
      }
    }

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

} else if (type === 11) {
        walkChildren(node as DocumentFragment, ctx)
      }

##### 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`

const p = Promise.resolve()
    
    export const nextTick = (fn: () => void) => p.then(fn)

往期推荐

[![b8bd0f9f8d402ef932c506aed9fc0000.png][]][b8bd0f9f8d402ef932c506aed9fc0000.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][b8bd0f9f8d402ef932c506aed9fc0000.png 1]

[![6da7b16217813ce9f322c4fdbbe1965b.png][]][6da7b16217813ce9f322c4fdbbe1965b.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][6da7b16217813ce9f322c4fdbbe1965b.png 1]

[![baf0e585204b9a0054091ba87e06b6bc.png][]][baf0e585204b9a0054091ba87e06b6bc.png 1]

[万字长文！总结Vue 性能优化方式及原理][baf0e585204b9a0054091ba87e06b6bc.png 1]

[![fffd318f22fe04ab001090f11a11c912.png][]][fffd318f22fe04ab001090f11a11c912.png 1]

[90 行代码的 webpack，你确定不学吗？][fffd318f22fe04ab001090f11a11c912.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![8d2df5300dfc58035c4646fecf18a5a8.png][]

点个在看支持我吧，转发就更好了

[8e598dea0535c6522683028e270aa631.png]: /images/20220829/25053045565642d88b143afbea0ce005.png
[cdc57f7e64a5afaf0e87f02436de0c8e.png]: /images/20220829/6fac4ed711cf432cb24c01fe1ae315af.png
[04090b12c54d7b542c4748e750ad0fd3.png]: /images/20220829/920692ddf72640179e1df1f624662c51.png
[ec11d75ff08ba496ef4eb2790e0dfb53.png]: /images/20220829/9804c292af7d4f779bac88393680c676.png
[e647726b60ebad63d1ddd5981aac67ab.png]: /images/20220829/45e54789a5a7441081de04197ae2fd38.png
[b8bd0f9f8d402ef932c506aed9fc0000.png]: /images/20220829/74e2542e1dd840ff8a642416da48bc7f.png
[b8bd0f9f8d402ef932c506aed9fc0000.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[6da7b16217813ce9f322c4fdbbe1965b.png]: /images/20220829/4098af3e52774fc68dcafba370e5057d.png
[6da7b16217813ce9f322c4fdbbe1965b.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[baf0e585204b9a0054091ba87e06b6bc.png]: /images/20220829/257f460d7f8d4c81b3a838f712584b58.png
[baf0e585204b9a0054091ba87e06b6bc.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[fffd318f22fe04ab001090f11a11c912.png]: /images/20220829/b8fd0a877025480ca508fc37e7f2b9ae.png
[fffd318f22fe04ab001090f11a11c912.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[8d2df5300dfc58035c4646fecf18a5a8.png]: /images/20220829/9e825b71aaa244ffbf77876548c1407c.png