对vue的template(模板)编译的理解

对vue的template(模板)编译的理解简单的说法：先转化为AST树，在得到的render函数中返回VNode（vue的虚拟DOM节点）详细步骤● 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree，即源代码的抽象语法结构的树状表现形式），compile是creatCompiler（createCompiler是用以创建编译器的）的返回

赏花赏景赏时光

6912人浏览 · 2018-03-20 10:04:17

赏花赏景赏时光 · 2018-03-20 10:04:17 发布

对vue的template(模板)编译的理解

简单的说法：先转化为AST树，在得到的render函数中返回VNode（vue的虚拟DOM节点）

详细步骤

● 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree，即源代码的抽象语法结构的树状表现形式），compile是creatCompiler（createCompiler是用以创建编译器的）的返回值，compile负责合并option

● 然后，AST会经过generate（将AST语法树转化成render function字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面包含（标签名、子节点、文本等）

原链接

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^