指令编译原理

📖 本节总结

指令在编译阶段被转换为具体的 DOM 操作或事件绑定。

指令的编译过程

模板

<template>
  <div v-bind:id="id" v-on:click="handleClick" v-if="show">
    {{ message }}
  </div>
</template>

编译后

// 条件判断
if (show) {
  // 创建元素
  const el = document.createElement('div')
  // 设置属性
  el.setAttribute('id', id)
  // 绑定事件
  el.addEventListener('click', handleClick)
  // 设置文本
  el.textContent = message
}

v-bind 编译

// v-bind:href -> setAttribute
// v-bind:value -> setAttribute
// v-bind:[name] -> setAttribute
// 编译时确定
h('a', { href: url })
// 动态绑定
h('a', {
  [`:${dynamicAttr}`]: value
})

编译优化

// 静态属性，直接设置
el.setAttribute('id', 'app')
// 动态属性，需要追踪
const update = () => {
  el.setAttribute('data-name', state.name)
}

v-on 编译

// v-on:click -> addEventListener
// v-on:input -> addEventListener
h('button', {
  onClick: handleClick,
  onMouseenter: handleMouseEnter
})

事件修饰符

// .stop -> event.stopPropagation()
// .prevent -> event.preventDefault()
// .capture -> capture: true
// .self -> 检查 event.target
// .once -> { once: true }
// 编译后
h('div', {
  onClick: (e) => {
    e.stopPropagation()
    handleClick()
  }
})

按键修饰符

// .enter -> 检查 keyCode === 13
// .space -> 检查 keyCode === 32
// .ctrl -> 检查 ctrlKey
h('input', {
  onKeydown: (e) => {
    if (e.keyCode === 13) {
      handleEnter()
    }
  }
})

v-if 编译

// v-if="show" -> 三元表达式或条件渲染
// 编译后
show
  ? h('div', message)
  : createCommentVNode('v-if')

v-else-if / v-else

// 编译后使用 renderSwitch
function render() {
  if (type === 'A') {
    return h('div', 'A')
  } else if (type === 'B') {
    return h('div', 'B')
  } else {
    return h('div', 'C')
  }
}

v-for 编译

// v-for="item in items" :key="item.id"
items.map(item => {
  return h('div', { key: item.id }, item.name)
})

编译后

// 使用 withKeys 包装
function render(_ctx) {
  return _renderList(_ctx.items, (item) => {
    return h('div', { key: item.id }, item.name)
  })
}

v-show 编译

// v-show="show" -> display 样式
h('div', {
  style: show ? {} : { display: 'none' }
})

完整的编译示例

// 模板
<template>
  <div
    v-if="visible"
    :class="className"
    :style="style"
    @click="handleClick"
  >
    {{ message }}
  </div>
</template>
// 编译后
function render(_ctx) {
  return _ctx.visible
    ? withDirectives(
        h('div', {
          class: _ctx.className,
          style: _ctx.style,
          onClick: _ctx.handleClick
        }, _ctx.message),
        [[vShow, _ctx.visible]])
    : createCommentVNode('v-if')
}

withDirectives

// 用于给 vnode 添加指令
export function withDirectives(vnode, directives) {
  // vnode 是虚拟节点
  // directives 是指令数组 [[指令, 值], [指令, 值]]
  const internalInstance = currentRenderingInstance
  if (internalInstance) {
    vnode.directives = vnode.directives || []
    vnode.directives.push(...directives)
  }
  return vnode
}

指令的运行时

// packages/runtime-dom/src/directives/vShow.ts
export const vShow = {
  // 指令挂载时
  beforeMount(el, { value }, { transition }) {
    // 保存原始 display 值
    el._vod = el.style.display
    if (value) {
      // 显示
      transition ? transition.enter(el) : removeDisplay(el)
    } else {
      // 隐藏
      el.style.display = 'none'
    }
  },
  // 更新时
  updated(el, { value, oldValue }, { transition }) {
    if (value === oldValue) return
    transition ? transition.leave(el, () => {
      if (value) {
        removeDisplay(el)
      } else {
        el.style.display = 'none'
      }
    }) : null
  }
}

总结

编译阶段	产物
v-bind	setAttribute / 直接属性
v-on	addEventListener
v-if	条件表达式
v-for	map 遍历
v-show	display 样式
v-model	v-bind + v-on