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

733次阅读  |  发布于2年以前

写在开头

正式开始

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

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

保姆式教学

<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>
<script type="module">
  import { createApp, reactive } from '../src'

  const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`

  createApp({
    branches: ['master', 'v2-compat'],
    currentBranch: 'master',
    commits: null,

    truncate(v) {
      const newline = v.indexOf('\n')
      return newline > 0 ? v.slice(0, newline) : v
    },

    formatDate(v) {
      return v.replace(/T|Z/g, ' ')
    },

    fetchData() {
      fetch(`${API_URL}${this.currentBranch}`)
        .then((res) => res.json())
        .then((data) => {
          this.commits = data
        })
    }
  }).mount()
</script>

<div v-scope v-effect="fetchData()">
  <h1>Latest Vue.js Commits</h1>
  <template v-for="branch in branches">
    <input
      type="radio"
      :id="branch"
      :value="branch"
      name="branch"
      v-model="currentBranch"
    />
    <label :for="branch">{{ branch }}</label>
  </template>
  <p>vuejs/vue@{{ currentBranch }}</p>
  <ul>
    <li v-for="{ html_url, sha, author, commit } in commits">
      <a :href="html_url" target="_blank" class="commit"
        >{{ sha.slice(0, 7) }}</a
      >
      - <span class="message">{{ truncate(commit.message) }}</span><br />
      by
      <span class="author"
        ><a :href="author.html_url" target="_blank"
          >{{ commit.author.name }}</a
        ></span
      >
      at <span class="date">{{ formatDate(commit.author.date) }}</span>
    </li>
  </ul>
</div>

<style>
  body {
    font-family: 'Helvetica', Arial, sans-serif;
  }
  a {
    text-decoration: none;
    color: #f66;
  }
  li {
    line-height: 1.5em;
    margin-bottom: 20px;
  }
  .author, .date {
    font-weight: bold;
  }
</style>

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

开始从源码启动函数入手

//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 对象。

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(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[]

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

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

     }
el = el || document.documentElement

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

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

 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')
      )

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

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

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

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

export const _if = (el: Element, exp: string, ctx: Context) => {
...
}
 if (import.meta.env.DEV && !exp.trim()) {
    console.warn(`v-if expression cannot be empty.`)
  }

 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 里，注释中不能出现字符序列 '--'。

  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所有的分支啦,这里可以看成是一个树的遍历（广度优先搜索）

这里由于都是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
  }
}
如果是文本节点
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)
    }

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

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

梳理总结

这里所有的dom节点改变，都是直接通过js操作dom

有趣的源码补充

const p = Promise.resolve()

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

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8