「.vue文件的编译」3. 模板编译之AST生成

el }) // 有 v-else 时 el.else = true // 值就应该是true啊 // 有 v-else-if 时 el.elseif = elseif // elseif的值 3.

下面重点看看closeElement方法的逻辑 rootElement.ifConditions就会有多个可能得根节点

解读Vue3模板编译优化

今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异，以及 VDOM 下 Diff 算法的优化。 编译入口了解过 Vue3 的同学肯定知道 Vue3 引入了新的组合 Api，在组件 mount 阶段会调用 setup 方法，之后会判断 render 方法是否存在，如果不存在会调用 compile 方法将 // 需要编译器Vue.createApp({ template: '

'})// 不需要Vue.createApp({ render() { return (null)// 注入 compile 方法function compileToFunction( // 模板 template: string | HTMLElement, // 编译配置 ，compile 方法主要分为三步，Vue3 的逻辑类似：模板编译，将模板代码转化为 AST；优化 AST，方便后续虚拟 DOM 更新；生成代码，将 AST 转化为可执行的代码；参考vue实战视频讲解：