vue挂载时都做了什么
-
Vue在挂载时会经历以下几个步骤:
-
解析模板:Vue会解析模板中的指令、插值表达式等,并将其转化为虚拟DOM对象。
-
创建虚拟DOM:Vue会根据模板解析得到的虚拟DOM树,生成一棵以vnode对象为节点的虚拟DOM树。
-
初始化实例:Vue会将Vue实例的选项与生命周期钩子函数初始化,并将虚拟DOM树与Vue实例进行绑定。
-
编译模板:Vue会对模板进行编译,将其转化为可执行的渲染函数。
-
渲染DOM:Vue会通过执行渲染函数,将虚拟DOM转化为真实的DOM元素,并将其插入到页面中指定的挂载点。
-
创建Watcher:Vue会为每一个响应式数据创建一个Watcher对象,用于响应数据的变化,并重新渲染视图。
-
执行生命周期钩子函数:在挂载完成后,Vue会依次执行实例的生命周期钩子函数,如created、mounted等。
总结起来,Vue在挂载时会完成模板解析、虚拟DOM创建、实例初始化、模板编译、DOM渲染、Watcher创建和生命周期钩子函数的执行等一系列操作,最终将组件渲染到页面中。
1年前 -
-
当 Vue 实例被创建之后,会经历一系列的初始化过程,最终将实例挂载到指定的 DOM 元素上。在挂载过程中,Vue 会做以下几件事情:
-
解析模板:Vue 会根据传入的模板选项(template)来解析出对应的 DOM 结构。解析过程中会对模板进行静态分析,提取出其中的数据绑定和指令。
-
创建虚拟 DOM:通过解析模板得到的数据,Vue 会创建一个虚拟 DOM(Virtual DOM)树。虚拟 DOM 是 Vue 内部维护的一个树状数据结构,它表示了实际 DOM 结构的抽象。
-
编译模板:在生成虚拟 DOM 之后,Vue 会对模板进行编译。编译过程主要是将模板中的指令和插值表达式转换成对应的渲染函数。
-
创建实例:虚拟 DOM 和渲染函数都准备好后,Vue 会根据这些信息创建一个 Vue 实例。实例中包含了与模板相关的状态数据、计算属性、监听器等。
-
挂载实例:最后一步就是将 Vue 实例挂载到指定的 DOM 元素上,即将虚拟 DOM 中的内容渲染到真实 DOM 中。Vue 会找到对应的元素,然后将虚拟 DOM 中的内容根据渲染函数的逻辑渲染并更新到该元素中。
总结起来,Vue 在挂载阶段做的主要工作就是解析模板、创建虚拟 DOM、编译模板、创建实例,最后将实例挂载到指定的 DOM 元素上。这个过程是 Vue 实现数据驱动视图的关键步骤,通过响应式的机制保持了实例与 DOM 的同步更新。
1年前 -
-
在Vue.js中,当一个Vue实例被创建并且准备好进行渲染时,会执行挂载阶段的一系列操作。挂载阶段主要涉及到的操作有:创建Vue实例、基本配置、编译模板、创建虚拟DOM、渲染和挂载。
-
创建Vue实例
在挂载阶段之前,需要通过new Vue()创建Vue实例。在创建实例时,会进行一些基本的初始化工作,如收集配置项、代理数据、初始化生命周期钩子等。 -
基本配置
创建Vue实例后,可以对实例进行一些基本的配置,如:设置el属性,指定Vue实例挂载的DOM元素;设置data属性,定义数据;设置methods属性,定义方法等。这些配置项将影响到后续的编译和渲染过程。 -
编译模板
在挂载阶段,Vue会对模板进行编译,将模板转换为渲染函数。编译过程包括以下几个步骤:(1) 解析模板:将模板解析为抽象语法树(AST);
(2) 优化代码:对AST进行一些优化,如标记静态节点、标记静态根节点等;
(3) 生成渲染函数:根据优化后的AST生成渲染函数。渲染函数是Vue用来渲染视图的关键。
-
创建虚拟DOM
经过模板编译后,Vue会生成虚拟DOM(Virtual DOM)。虚拟DOM是一个以JavaScript对象形式表示的虚拟的DOM树,它是对真实DOM的描述。Vue使用虚拟DOM来进行高效的DOM操作和渲染。 -
渲染和挂载
在挂载阶段的最后,Vue会将虚拟DOM渲染为真实DOM,并挂载到指定的el元素上。这个过程主要包括以下几个步骤:(1) 创建真实DOM:根据虚拟DOM创建对应的真实DOM节点;
(2) 更新真实DOM:将真实DOM节点按照虚拟DOM的描述进行更新;
(3) 挂载到DOM:将经过更新的真实DOM节点挂载到指定的
el元素上;(4) 设置数据响应式:在挂载过程中,Vue还会对数据进行响应式处理,将数据和视图建立关联。
通过以上的操作流程,Vue实例在挂载阶段完成了对模板的编译、渲染和挂载,最终将视图显示在浏览器中。
1年前 -