petite-vue是最近（一个月前）vue作者尤雨溪发布的一个渐进式增强（ progressive enhancement ）的vue阉割版。跟vue差不多的语法和双向绑定响应式的心智模型。其主要特点有：

小。只有0.58kb
跟Vue相同的模版语法。
没有虚拟dom。
底层依赖@vue/reactivity 。

看到没有虚拟dom，熟悉vue的同学应该感觉到了，这感觉有点像vue1。但是petite-vue相比完整版vue来说，体积更加的小，且阉割一些功能。尤大大对它的定位是 progressive enhancement 的场景，所以大一点的项目估计是用不上了，所以在我看来他更像是玩具，但是他可以帮助我们理解vue的响应式原理。我觉得更多是@vue/reactivity 的推广。。。

基本用法

<script type="module">
  import { createApp } from '[https://unpkg.com/petite-vue?module'](https://unpkg.com/petite-vue?module%27)

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>
<!-- v-scope value can be omitted -->
<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

v-scope 标识这块DOM被petite-vue接管了。 {{}} 、 @click 熟悉的模版语法，分别用来引用变量和绑定事件。 createApp创建应用状态其中包括了变量、方法、getter（computed）。 mount方法将会自动寻找v-scope标签，然后进行下面的遍历绑定工作。

大致流程

CreateApp

createApp的函数调用链路：CreateApp -> CreateContext ，reactive


export const createApp = (initialData?: any) => {
  // root context
  const ctx = createContext()
  if (initialData) {
    ctx.scope = reactive(initialData)
  }

  // global internal helpers
  ctx.scope.$s = toDisplayString

  let rootBlocks: Block[]

  return {
      mount(){
      //..
      }
  }
}

CreateContext其实就是创建该实例的相关上下文。effects就是副作用函数的数组，effect把副作用函数存起来。

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

reactive是@vue/reactivity的api，简单说就是把数据变为代理状态（监听set，get）。 rawEffect也是@vue/reactivity的api，他可以执行副作用函数（有scheduler，执行scheduler），然后自动收集副作用函数的依赖，在变量变化时再次自动执行副作用函数。

queueJob


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

export const queueJob = (job: Function) => {
  if (!queue.includes(job)) queue.push(job)
  if (!queued) {
    queued = true
    nextTick(flushJobs)
  }
}

const flushJobs = () => {
  for (let i = 0; i < queue.length; i++) {
    queue[i]()
  }
  queue.length = 0
  queued = false
}

至于queueJob跟完整版的vue很像，都是在下一个微任务周期去统一执行job。整体会把相应的函数放进执行队列里，具体可以看看 scheduler选项，

mount

根据v-scope 属性找到所有的block，然后去新建Block实例。

mount() {
     //...
    let roots = el.hasAttribute('v-scope')
            ? [el]
            : // optimize whole page mounts: find all root-level v-scope
              [...el.querySelectorAll(`[v-scope]:not([v-scope] [v-scope])`)]
    if (!roots.length) {
    roots = [el]
    }
    
    //...
          
    rootBlocks = roots.map((el) => new Block(el, ctx, true))
    return this
}

block

看看Block类的定义：

export class Block {
  template: Element | DocumentFragment
  ctx: Context
  key?: any
  parentCtx?: Context

  isFragment: boolean
  start?: Text
  end?: Text

  get el() {
    return this.start || (this.template as Element)
  }

  constructor(template: Element, parentCtx: Context, isRoot = false) {
    this.isFragment = template instanceof HTMLTemplateElemen
    //。。。
    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)
  }

  insert(parent: Element, anchor: Node | null = null) {
    if (this.isFragment) {
     //。。。
    } else {
      parent.insertBefore(this.template, anchor)
    }
  }

  remove() {
    if (this.parentCtx) {
      remove(this.parentCtx.blocks, this)
    }
    //。。。
    this.template.parentNode!.removeChild(this.template)
    this.teardown()
  }

  teardown() {
    this.ctx.blocks.forEach((child) => {
      child.teardown()
    })
    this.ctx.effects.forEach(stop)
    this.ctx.cleanups.forEach((fn) => fn())
  }
}

可以简单认为Block就是一个块，他自带了一些dom节点的操作方法insert、remove方法，如v-if，v-for等命令需要用到。tearndown用于清除相关副作用。初始化时，定义自己的上下文（ctx）。 然后调用walk方法遍历子节点。

walk

看看最关键walk方法，由于没有虚拟dom，所以直接遍历dom的属性，通过checkAttr检查是否有相应的属性，然后绑定相应的方法。如果

export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
  const type = node.nodeType
  if (type === 1) {
    // Element
    const el = node as Element
    if (el.hasAttribute('v-pre')) {
      return
    }

    let exp: string | null

    // v-if
    if ((exp = checkAttr(el, 'v-if'))) {
      return _if(el, exp, ctx)
    }

    // v-for
    if ((exp = checkAttr(el, 'v-for'))) {
      return _for(el, exp, ctx)
    }
    
    //。。。

    // v-scope
    if ((exp = checkAttr(el, 'v-scope')) || exp === '') {
      ctx = createScopedContext(ctx, exp ? evaluate(ctx.scope, exp) : {})
    }

    // other directives
    let deferredModel
    for (const { name, value } of [...el.attributes]) {
      if (dirRE.test(name) && name !== 'v-cloak') {
        if (name === 'v-model') {
          // defer v-model since it relies on :value bindings to be processed
          // first
          deferredModel = value
        } else {
          processDirective(el, name, value, ctx)
        }
      }
    }
    if (deferredModel) {
      processDirective(el, 'v-model', deferredModel, ctx)
    }
  } 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 - 1) {
        segments.push(JSON.stringify(data.slice(lastIndex)))
      }
      applyDirective(node, text, segments.join('+'), ctx)
    }
  }else if (type === 11) {
    walkChildren(node as DocumentFragment, ctx)
  }
}


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

根据node节点类型：element、text、fragment 分别去执行不同的操作。

对于element：绑定v-if，v-scope等等命令。如果是v-scope将会创建相应上下文。processDirective用于处理一些vue的指令修饰符等，最终也是调用applyDirective应用相关命令。
对于text：把所有模版字符串的内容提取拼接出来，然后调用applyDirective。
对于fragment：就是递归遍历child。

绑定相应的命令：

下面看看三个常见的命令绑定吧，其他其实原理也差不多，感兴趣直接肝源码。

v-if：

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

  const nextNode = el.nextSibling
  parent.removeChild(el)

  let block: Block | undefined

  const removeActiveBlock = () => {
    if (block) {
      parent.insertBefore(anchor, block.el)
      block.remove()
      block = undefined
    }
  }

  ctx.effect(() => {
    for (const { exp, el } of branches) {
      if (!exp || evaluate(ctx.scope, exp)) {
        removeActiveBlock()
        block = new Block(el, ctx)
        block.insert(parent, anchor)
        parent.removeChild(anchor)
        return
      }
    }
    removeActiveBlock()
  })

  return nextNode
}

不停的去寻找branch分支，通过v-else 和 v-else-if 来匹配。之后会新建一个新的block，并且插入到父节点的下的子节点（删除原来的节点）。 removeActiveBlock会首先删除原来的active的节点。当匹配到第一个分支满足条件的时候就会删除原来的节点，然后把现在的节点插入进去，并且终止循环，不会再去判断下面的条件。

text：

上面也提到了，其实就是把模版字符串所有的都提取出来，然后调用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)
  }
}

export const text: Directive<Text | Element> = ({ el, get, effect }) => {
  effect(() => {
    el.textContent = toDisplayString(get())
  })
}

export const toDisplayString = (value: any) =>
  value == null
    ? ''
    : isObject(value)
    ? JSON.stringify(value, null, 2)
    : String(value)

Text指令调用toDisplayString，然后收集副作用。

V-on:

用于监听事件

export const on: Directive = ({ el, get, exp, arg, modifiers }) => {
  if (!arg) {
    if (import.meta.env.DEV) {
      console.error(`v-on="obj" syntax is not supported in petite-vue.`)
    }
    return
  }

  let handler = simplePathRE.test(exp)
    ? get(`(e => ${exp}(e))`)
    : get(`($event => { ${exp} })`)

  // special lifecycle events
  if (arg === 'mounted') {
    nextTick(handler)
    return
  } else if (arg === 'unmounted') {
    return () => handler()
  }

  if (modifiers) {
    // map modifiers
    if (arg === 'click') {
      if (modifiers.right) arg = 'contextmenu'
      if (modifiers.middle) arg = 'mouseup'
    }

    const raw = handler
    handler = (e: Event) => {
      if ('key' in e && !(hyphenate((e as KeyboardEvent).key) in modifiers)) {
        return
      }
      for (const key in modifiers) {
        const guard = modifierGuards[key]
        if (guard && guard(e, modifiers)) {
          return
        }
      }
      return raw(e)
    }
  }

  listen(el, arg, handler, modifiers)
}

如果一开始判断了特殊的生命周期函数。解析来就是包装了一下监听的函数，就去监听原来的dom节点了。modifierGuards就是根据vue的修饰符可以快速监听一些联动的按键什么的，这里保护一下真正handler的触发条件，相当于提前帮用户判断。。。贴心

总结

整体流程：初始化：页面加载 --> 初始化应用 --> 创建上下文，包括副作用等。 --> 实例化block --> 遍历DOM数，根据节点的指令属性绑定相应的副作用函数 --> 运行副作用函数 --> 收集依赖

更新：依赖改变 --> 重新运行副作用函数 --> queuejob 调度任务 --> 下一个微任务统一执行副作用函数。 --> 更新dom。

总的来说跟vue的流程非常像，这也是尤大大写的很快的原因之一吧，可以看出来复制粘贴了之前的代码。

差别就是由于没有虚拟dom，所以相应的副作用函数都是直接与dom节点相绑定，遍历的时候也是在直接遍历DOM树，而不是遍历Vue解析文件后生成的虚拟DOM。

关于有无虚拟DOM网上也有很多讨论，建议自行查阅。

得益于@vue/reactivity的封装，让整个库整体思路非常清晰，也非常轻量化。

petite-vue源码浅析