一、vue初始化做了什么?
1、创建Vue实例对象
2、init过程会初始化生命周期,初始化事件中心,初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。
3、初始化后,调用
m
o
u
n
t
方
法
对
V
u
e
实
例
进
行
挂
载
(
挂
载
的
核
心
过
程
包
括
模
板
编
译
、
渲
染
以
及
更
新
三
个
过
程
)
。
4
、
如
果
没
有
在
V
u
e
实
例
上
定
义
r
e
n
d
e
r
方
法
而
是
定
义
了
t
e
m
p
l
a
t
e
,
那
么
需
要
经
历
∗
∗
编
译
阶
段
∗
∗
。
需
要
先
将
t
e
m
p
l
a
t
e
字
符
串
编
译
成
r
e
n
d
e
r
f
u
n
c
t
i
o
n
,
t
e
m
p
l
a
t
e
字
符
串
编
译
步
骤
如
下
:
(
1
)
p
a
r
s
e
正
则
解
析
t
e
m
p
l
a
t
e
字
符
串
形
成
A
S
T
(
抽
象
语
法
树
,
是
源
代
码
的
抽
象
语
法
结
构
的
树
状
表
现
形
式
)
(
2
)
o
p
t
i
m
i
z
e
标
记
静
态
节
点
跳
过
d
i
f
f
算
法
(
3
)
g
e
n
e
r
a
t
e
过
程
将
A
S
T
转
化
成
r
e
n
d
e
r
f
u
n
c
t
i
o
n
字
符
串
5
、
编
译
成
r
e
n
d
e
r
f
u
n
c
t
i
o
n
后
,
调
用
mount方法对Vue实例进行挂载(挂载的核心过程包括模板编译、渲染以及更新三个过程)。 4、如果没有在Vue实例上定义render方法而是定义了template,那么需要经历**编译阶段**。需要先将template 字符串编译成 render function,template 字符串编译步骤如下 : (1)parse正则解析template字符串形成AST(抽象语法树,是源代码的抽象语法结构的树状表现形式) (2)optimize标记静态节点跳过diff算法 (3)generate过程将AST转化成render function字符串 5、编译成render function 后,调用
mount方法对Vue实例进行挂载(挂载的核心过程包括模板编译、渲染以及更新三个过程)。4、如果没有在Vue实例上定义render方法而是定义了template,那么需要经历∗∗编译阶段∗∗。需要先将template字符串编译成renderfunction,template字符串编译步骤如下:(1)parse正则解析template字符串形成AST(抽象语法树,是源代码的抽象语法结构的树状表现形式)(2)optimize标记静态节点跳过diff算法(3)generate过程将AST转化成renderfunction字符串5、编译成renderfunction后,调用mount的mountComponent方法,先执行beforeMount钩子函数,然后核心是实例化一个渲染Watcher,在它的回调函数(初始化的时候执行,以及组件实例中监测到数据发生变化时执行)中调用updateComponent方法(此方法调用render方法生成虚拟Node,最终调用update方法更新DOM)。
6、调用render方法将render function渲染成虚拟的Node(真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。如果频繁的去做 DOM 更新,会产生一定的性能问题,而 Virtual DOM 就是用一个原生的 JavaScript 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多,而且修改属性也很轻松,还可以做到跨平台兼容),render方法的第一个参数是createElement(或者说是h函数),这个在官方文档也有说明。
7、生成虚拟DOM树后,需要将虚拟DOM树转化成真实的DOM节点,此时需要调用update方法,update方法又会调用pacth方法把虚拟DOM转换成真正的DOM节点。需要注意在图中忽略了新建真实DOM的情况(如果没有旧的虚拟Node,那么可以直接通过createElm创建真实DOM节点),这里重点分析在已有虚拟Node的情况下,会通过sameVnode判断当前需要更新的Node节点是否和旧的Node节点相同(例如我们设置的key属性发生了变化,那么节点显然不同),如果节点不同那么将旧节点采用新节点替换即可,如果相同且存在子节点,需要调用patchVNode方法执行diff算法更新DOM,从而提升DOM操作的性能。
二、变化侦测阶段
1、订阅:在init的时候会利用Object.defineProperty方法(不兼容IE8)监听Vue实例的响应式数据的变化从而实现数据劫持能力(利用了JavaScript对象的访问器属性get和set,在未来的Vue3中会使用ES6的Proxy来优化响应式原理)。在初始化流程中的编译阶段,当render function被渲染的时候,会读取Vue实例中和视图相关的响应式数据,此时会触发getter函数进行依赖收集(将观察者Watcher对象存放到当前闭包的订阅者Dep的subs中),此时的数据劫持功能和观察者模式就实现了一个MVVM模式中的Binder,之后就是正常的渲染和更新流程。
2、发布:当数据发生变化或者视图导致的数据发生了变化时,会触发数据劫持的setter函数,setter会通知初始化依赖收集中的Dep中的和视图相应的Watcher,告知需要重新渲染视图,Wather就会再次通过update方法来更新视图。
vue的运行机制简述
最新推荐文章于 2024-04-26 22:06:08 发布