【Vue】Vue三要素模板解析、响应式、渲染

Vue 实现流程：

        1、把模板解析为 render 函数

                       · 运用 with

                       · 模板中的所有信息都被 render 函数包含

                       · 模板中用到的 data 中的属性，都变成了 JS 变量

                       · 模板中的 v-model v-for v-on 都变成了 JS 逻辑
                       · render 函数返回 vnode

Vue三要素之模板解析

Vue模板的本质是字符串，有逻辑如 v-if v-for 等（模板转换成 js 后【 render 函数 】通过js来实现逻辑，因为前端语言中，只有 JS 是图灵完备的语言），与 html 格式很像，但有很大区别。html 是静态的， Vue 的模板是动态的。不过，最终 Vue 的模板都要通过 js 转换为 html 来显示。

模板中的所有内容都包含在了 render 函数中。

模板：

<div id="app">