vue 中如何解析模板

模板是什么

• 本质：字符串
• 有逻辑，如 v-if v-for 等
• 与 html 格式很像，但有很大区别
• 最终还要转换为 html 来显示

模板最终必须转换成 JS 代码，因为

• 有逻辑（v-if v-for），必须用 JS才能实现
• 转换为 html 渲染页面，必须用 JS 才能实现
• 因此，模板最重要转换成一个 JS 函数（render 函数）

render 函数

• 模板中所有信息都包含在了 render 函数中
• this 即vm
• price 即 this.price 即 vm.price，即 data 中的 price
• _c 即 this._c 即 vm._c

render 函数与 vdom

• vm._c 其实就相当于 snabbdom中的 h 函数
• render 函数执行之后，返回的是 vnode
  

• updateComponent中实现了 vdom 的 patch
• 页面首次渲染执行 updateComponent
• data 中每次修改属性，执行updateComponent