Vue3编译器原理

编译器

1. 将用户编写的 模板template 转换为 渲染函数render。
2. 前端程序员更加喜欢使用html格式去描述试图
3. vue刚好是声明式渲染
4. 使用编译器，有利于性能优化（静态分析）
5. 直接编写渲染的过程，很显然不方便用户编写代码

vue3编译过程调试

template explorer
这个链接页面下 打开控制台可以看到ast输出

compile.ts 65行代码给baseCompile函数打上断点

<div id="app">
  <h1>vue3 编译器</h1>
  <p>{{counter}}</p>
</div>
<script src="../dist/vue.global.js"></script>
<script>
  const {createApp, h} = Vue
  const app = createApp({
    data() {
      return {
        counter: 1
      }
    },
  })
  app.mount('#app')
  // 输出渲染函数
  console.log(app._instance.render)
</script>

vue编译优化策略

• 静态节点提升 - static hoisting 内存换时间
• 补丁标记 - patchFlags 精确更新节点，不需要执行额外代码都可以跳过,而vue2是把没用的代码也要跑一边
• 事件处理器缓存 - event handler cache 缓存绑定的事件
• 区块 - block dynamicChildren是数组

1. 打开链接https://cn.vuejs.org/api/
2. 点击演练场
3. 输入下面代码

<script setup>
	import { ref } from 'vue'
	const count = ref(111111)
</script>
<template>
  <div>zanlan-zanlan</div>
  <div>{{count}}</div>
</template>

4. 结果为

Vue template 和 React JSX异同

• 流程都是生产虚拟dom
  • vue
    • template => render => vnode
    • global版本运行时执行编译
  • react
    • jsx => create() => vdom
• 执行时刻
  • vue
    • 打包时预编译template为render，不再拥有编译功能，不能使用template
    • global版本运行时执行编译，可以使用template
  • react
    • babel转译为js
• 编译期间优化
  • vue3特有的编译期间优化
  • react是操作js，缺少上小文，优化难度，比vue难，vue可以在模板中分析出静态节点