持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
3.4 模板的工作原理
虽然vue中使用了虚拟dom，但其实我们平常写的最多的还是模板，也就是.vue文件中的template.
这里就需要一个关键的东西：编译器。其实每个编程语言都会有编译器，通常我们把你写出来的代码，翻译成计算机识别的机器码，这个过程叫做编译。
我这里的编译定义比较狭隘，主要指的是把.vue文件，转换成js代码的过程。
我们都知道一个vue文件基本长这样
<template>
<p>123</p>
</template>
<script>
export defineComponent({
name:'App'
})
</script>
<style></style>
当我们把这个vue文件转换为js时
export default {
name:'App',
render(){
return h('p','123')
}
}
这里面就是编译器需要做的了，原书中这一章也讲的很简单。
3.5 Vuejs是各个模块组成的有机整体
在vue中，组件的实现依赖渲染器，模板的使用依赖编译器，二者中间的联系就是虚拟DOM。通过各个模块间的有机组合，才产生了vue这个框架。
我们还看我上面这个例子，稍微增加一点东西。模板里加上一个动态class名。
<p :class='cls'>123</p>
然后转换js的时候，就会变成这样,其中cls就成了变量。
export default {
name:'App',
render(){
return h('p',{className:cls},'123')
}
}
我们都知道vue3对于模板编译有一个小创新，就是把模板的变化的部分标记出来，那么我们也可以在虚拟dom中新增一个字段
export default {
name:'App',
render(){
return h(
'p',
{
className:cls,
_patchFlag:1
},
'123'
)
}
}
我们假设_patchFlag === 1时，表示className是动态的，那么我们就可以定义各种_patchFlag，在渲染器中就可以根据这个字段做相应的优化，更快更有效率的渲染，这也算是vue3的一点创新。
总结
这一章，讲了vue3的设计思路，首先说了vue3是声明式渲染，因为声明式渲染，因此需要虚拟dom，再需要渲染器把虚拟dom变为真实dom.
再由于vue单文件组件的设计，因此需要一个编译器来解决。
这些其实就是vue的几个主要模块了，后续就进入到了第二篇：响应系统
