一、初始化实例
在Vue渲染过程的开始阶段,首先需要进行实例化操作,即建立Vue实例。
这个过程中,Vue会将数据对象进行响应式处理,即将数据对象变成Observer对象,并添加监听器,使得数据模型变化时,能够及时地通知视图层。这也是实现Vue双向数据绑定的基础。
示例代码:
new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
二、编译模板
在实例化完成后,Vue会对模板进行编译,将模板转化为虚拟DOM树。
Vue中使用的是基于HTML的模板语法,模板会被解析成抽象语法树,然后再转化为虚拟DOM树。
Vue编译过程中主要包括以下几个步骤:
1、解析模板,生成AST(抽象语法树)。
2、标记静态根节点。
3、遍历AST,为每个静态节点打上标记。
4、把带变量的节点作为动态节点,为其打上标记。
5、根据AST生成渲染函数。
示例代码:
{{ message }}
原创文章,作者:WJIZL,如若转载,请注明出处:https://www.506064.com/n/361987.html