1. 首先第一步实例化一个vue项目 2. 模板编译是在vue生命周期的mount阶段进行的 3. 在mount阶段的时候执行了compile方法将template里面的内容转化成真正的html代码 4. parse阶段是将html转化成ast(抽象语法树),用来表示代码的数据结构。在 Vue 中我把它理解为嵌套的、携带标签名、属性和父子关系的 JS 对象,以树来表现 DOM 结构。 [JavaScript] 纯文本查看 复制代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 | html: "<div id=" test ">texttext</div>" ast: { type: 1, tag: "div" , attrsList: [{name: "id" , value: "test" }], attrsMap: {id: "test" }, parent: undefined, children: [{ type: 3, text: 'texttext' } ], plain: true , attrs: [{name: "id" , value: "'test'" }] } | 5. optimize 会对parse生成的ast树进行静态资源优化(静态内容指的是和数据没有关系,不需要每次都刷新的内容) 6. generate 函数,会将每一个ast节点创建一个内部调用的方法等待后面的调用。 [JavaScript] 纯文本查看 复制代码 1 2 3 4 5 6 7 8 9 | <template> <div id= "test" > {{val}} <img src= "http://xx.jpg" > </div> </template> {render: "with(this){return _c('div',{attrs:{" id ":" test "}},[[_v(_s(val))]),_v(" "),_m(0)])}" } | 7. 在complie过程结束之后会生成一个render字符串 ,接下来就是 new watcher这个时候会对绑定的数据执行监听,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode。当这个 render 函数字符串在第一次 mount、或者绑定的数据更新的时候,都会被调用,生成 Vnode。如果是数据的更新,那么 Vnode 会与数据改变之前的 Vnode 做 diff,对内容做改动之后,就会更新到我们真正的 DOM 上啦 | |