petite-vue源码分析：无虚拟DOM的极简版Vue

最近发现Vue增加了一个petite-vue的仓库，大概看了一下，这是一个无虚拟DOM的mini版Vue，前身貌似是vue-lite(瞎猜的~)，主要用于在服务端渲染的HTML页面中上"sprinkling"(点缀)一些Vue式的交互。颇有意思，于是看了下源码(v0.2.3)，整理了本文。

起步

开发调试环境

整个项目的开发环境非常简单

git clone git@github.com:vuejs/petite-vue.git


yarn 


# 使用vite启动

npm run dev


# 访问http://localhost:3000/

(不得不说，用vite来搭开发环境还是挺爽的~

新建一个测试文件exmaples/demo.html，写点代码

<script type="module">

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


  createApp({

    msg: "hello"

  }).mount("#app")

</script>


<div id="app">

    <h1>{{msg}}</h1>

</div>

然后访问http://localhost:3000/demo.html即可

目录结构

从readme可以看见项目与标准vue的一些差异

• 
  
• Only ~5.8kb，体积很小
  
• Vue-compatible template syntax，与Vue兼容的模板语法
  
• DOM-based, mutates in place，基于DOM驱动，就地转换
  
• Driven by @vue/reactivity，使用@vue/reactivity驱动
  

目录结构也比较简单，使用ts编写，外部依赖基本上只有@vue/reactivity。

核心实现

createContext

从上面的demo代码可以看出，整个项目从createApp开始。

export const createApp = (initialData?: any) => {

  // root context

  const ctx = createContext()

  if (initialData) {

    ctx.scope = reactive(initialData) // 将初始化数据代理成响应式

  }

  // app的一些接口

  return {

    directive(name: string, def?: Directive) {},

    mount(el?: string | Element | null) {},

    unmount() {}

  }

}

关于Vue3中的reactive,可以参考之前整理的：Vue3中的数据侦测reactive，这里就不再展开了。

createApp中主要是通过createContext创建根context，这个上下文现在基本不陌生了，来看看createContext

export const createContext = (parent?: Context): Context => {

  const ctx: Context = {

    ...parent,

    scope: parent ? parent.scope : reactive({}),

    dirs: parent ? parent.dirs : {}, // 支持的指令

    effects: [],

    blocks: [],

    cleanups: [],

    // 提供注册effect回调的接口，主要使用调度器来控制什么时候调用

    effect: (fn) => {

      if (inOnce) {

        queueJob(fn)

        return fn as any

      }

      // @vue/reactivity中的effect方法

      const e: ReactiveEffect = rawEffect(fn, {

        scheduler: () => queueJob(e)

      })

      ctx.effects.push(e)

      return e

    }

  }

  return ctx

}

稍微看一下queueJob就可以发现，还是Vue中熟悉的nextTick实现，

• 
  
• 通过一个全局变量queue队列保存回调
  
• 在下一个微任务处理阶段，依次执行queue中的每一个回调，然后清空queue
  

mount

基本使用

createApp().mount("#app")

mount方法最主要的作用就是处理el参数，找到应用挂载的根DOM节点，然后执行初始化流程

mount(el?: string | Element | null) {

    let roots: Element[]

    // ...根据el参数初始化roots

    // 根据el创建Block实例

    rootBlocks = roots.map((el) => new Block(el, ctx, true))

    return this

}

Block是一个抽象的概念，用于统一DOM节点渲染、插入、移除和销毁等操作。

下图是依赖这个Block的地方，可以看见主要在初始化、if和for这三个地方使用

看一下Block的实现

// src/block.ts

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.template

    // 初始化this.ctx


    // 构建应用

    walk(this.template, this.ctx)

  }

  // 主要在新增或移除时使用，可以先不用关心实现

  insert(parent: Element, anchor: Node | null = null) {}

  remove() {}

  teardown() {}

}

这个walk方法，主要的作用是递归节点和子节点，如果之前了解过递归diff，这里应该比较熟悉。但petite-vue中并没有虚拟DOM，因此在walk中会直接操作更新DOM。

export const walk = (node: Node, ctx: Context): ChildNode | null | void => {

  const type = node.nodeType

  if (type === 1) {

    // 元素节点

    const el = node as Element

    // ...处理 如v-if、v-for

    // ...检测属性执行对应的指令处理 applyDirective，如v-scoped、ref等


    // 先处理子节点，在处理节点自身的属性

    walkChildren(el, ctx)


    // 处理节点属性相关的自定，包括内置指令和自定义指令

  } else if (type === 3) {

    // 文本节点

    const data = (node as Text).data

    if (data.includes('{{')) {

      // 正则匹配需要替换的文本，然后 applyDirective(text)

      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.nodeType区分处理处理

• 
  
• 对于元素节点，先处理了节点上的一些指令，然后通过walkChildren处理子节点。
  
  • 
    
  • v-if，会根据表达式决定是否需要创建Block然后执行插入或移除
    
  • v-for，循环构建Block，然后执行插入
    
  
  
  
• 对于文本节点，替换{{}}表达式，然后替换文本内容
  

v-if

来看看if的实现，通过branches保存所有的分支判断，activeBranchIndex通过闭包保存当前位于的分支索引值。

在初始化或更新时，如果某个分支表达式结算结果正确且与上一次的activeBranchIndex不一致，就会创建新的Block，然后走Block构造函数里面的walk。

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

  const parent = el.parentElement!

  const anchor = new Comment('v-if')

  parent.insertBefore(anchor, el)


  // 存放条件判断的各种分支

  const branches: Branch[] = [{ exp,el }]


  // 定位if...else if ... else 等分支，放在branches数组中


  let block: Block | undefined

  let activeBranchIndex: number = -1 // 通过闭包保存当前位于的分支索引值


  const removeActiveBlock = () => {

    if (block) {

      parent.insertBefore(anchor, block.el)

      block.remove()

      block = undefined

    }

  }


  // 收集依赖

  ctx.effect(() => {

    for (let i = 0; i < branches.length; i++) {

      const { exp, el } = branches[i]

      if (!exp || evaluate(ctx.scope, exp)) {

        // 当判断分支切换时，会生成新的block

        if (i !== activeBranchIndex) {

          removeActiveBlock()

          block = new Block(el, ctx)

          block.insert(parent, anchor)

          parent.removeChild(anchor)

          activeBranchIndex = i

        }

        return

      }

    }

    // no matched branch.

    activeBranchIndex = -1

    removeActiveBlock()

  })


  return nextNode

}

v-for

for指令的主要作用是循环创建多个节点，这里还根据key实现了类似于diff算法来复用Block的功能

export const _for = (el: Element, exp: string, ctx: Context) => {

  // ...一些工具方法如createChildContexts、mountBlock


  ctx.effect(() => {

    const source = evaluate(ctx.scope, sourceExp)

    const prevKeyToIndexMap = keyToIndexMap

    // 根据循环项创建多个子节点的context

    ;[childCtxs, keyToIndexMap] = createChildContexts(source)

    if (!mounted) {

      // 首次渲染，创建新的Block然后insert

      blocks = childCtxs.map((s) => mountBlock(s, anchor))

      mounted = true

    } else {

      // 更新时

      const nextBlocks: Block[] = []

      // 移除不存在的block

      for (let i = 0; i < blocks.length; i++) {

        if (!keyToIndexMap.has(blocks[i].key)) {

          blocks[i].remove()

        }

      }

      // 根据key进行处理

      let i = childCtxs.length

      while (i--) {

        const childCtx = childCtxs[i]

        const oldIndex = prevKeyToIndexMap.get(childCtx.key)

        const next = childCtxs[i + 1]

        const nextBlockOldIndex = next && prevKeyToIndexMap.get(next.key)

        const nextBlock =

          nextBlockOldIndex == null ? undefined : blocks[nextBlockOldIndex]

        // 不存在旧的block，直接创建

        if (oldIndex == null) {

          // new

          nextBlocks[i] = mountBlock(

            childCtx,

            nextBlock ? nextBlock.el : anchor

          )

        } else {

          // 存在旧的block，复用，检测是否需要移动位置

          const block = (nextBlocks[i] = blocks[oldIndex])

          Object.assign(block.ctx.scope, childCtx.scope)

          if (oldIndex !== i) {

            if (blocks[oldIndex + 1] !== nextBlock) {

              block.insert(parent, nextBlock ? nextBlock.el : anchor)

            }

          }

        }

      }

      blocks = nextBlocks

    }

  })


  return nextNode

}

处理指令

所有的指令都是通过applyDirective和processDirective来处理的，后者是基于前者的二次封装，主要处理一些内置的指令快捷方式builtInDirectives，

export const builtInDirectives: Record<string, Directive<any>> = {

  bind,

  on,

  show,

  text,

  html,

  model,

  effect

}

每种指令都是基于ctx和el等来实现快速实现某些逻辑，具体实现可以参考对应源码。

当调用app.directive注册自定义指令时，

directive(name: string, def?: Directive) {

    if (def) {

        ctx.dirs[name] = def

        return this

    } else {

        return ctx.dirs[name]

    }

},

实际上是向contenx的dirs添加一个属性，当调用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)

  }

}

因此，可以利用上面传入的这些参数来构建自定义指令

app.directive("auto-focus", ({el})=>{

    el.focus()

})

小结

整个代码看起来，确实非常精简

• 
  
• 没有虚拟DOM，就无需通过template构建render函数，直接递归遍历DOM节点，通过正则处理各种指令就行了
  
• 借助@vue/reactivity，整个响应式系统实现的十分自然，除了在解析指令的使用通过ctx.effect()收集依赖，基本无需再关心数据变化的逻辑
  

文章开头提到，petite-vue的主要作用是：在服务端渲染的HTML页面中上"sprinkling"(点缀)一些Vue式的交互。

就我目前接触到的大部分服务端渲染HTML的项目，如果要实现一些DOM交互，一般使用

• 
  
• jQuery操作DOM，yyds
  
• 当然Vue也是可以通过script + template的方式编写的，但为了一个div的交互接入Vue，又有点杀鸡焉用牛刀的感觉
  
• 其他如React框架等同上
  

petite-vue使用了与Vue基本一致的模板语法和响应式功能，开发体验上应该很不错。且其无需考虑虚拟DOM跨平台的功能，在源码中直接使用浏览器相关API操作DOM，减少了框架runtime运行时的成本，性能方面应该也不错。

总结一下，感觉petite-vue结合了Vue标准版本的开发体验，以非常小的代码体积、良好的开发体验和还不错的运行性能，也许可以用来替代jQuery，用更现代的方式来操作DOM。

该项目是6月30号提交的第一个版本，目前相关的功能和接口应该不是特别稳定，可能会有调整。但就exmples目录中的示例而言，应该能满足一些简单的需求场景了，也许可以尝试在一些比较小型的历史项目中使用。