一、什么是VNode
(1)Vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素。
(2)其实vnode只是一个名字,本质上其实是Javascript中一个普通的对象,是从VNode类实例化的对象。我们用这个Javascript对象来描述一个真实DOM元素的话,那么该DOM元素上的所有属性在VNode这个对象上都存在对应的属性。
(3)vnode可以理解成节点描述对象,它描述了应该怎样去创建真实的DOM节点。例如tag表示一个元素节点的名称,text表示一个文本节点的文本,children表示子节点等。
(4)vnode表示一个真实的DOM元素,所有真实的DOM节点都使用vnode创建并插入到页面中。(vnode=》DOM=》视图)
(5)vnode和视图是一一对应的。我们可以把vnode理解成Javascript对象版本的DOM元素。
(6)渲染视图的过程是先创建vnode,然后再使用vnode去生成真实的DOM元素,最后插入页面渲染视图。
二、VNode的作用
(1)由于每次渲染视图时都是先创建vnode,然后使用它创建真实DOM插入到页面中,所以可以将上一次渲染视图时所创建的vnode缓存起来,之后每当需要重新渲染视图时,将新创建的vnode和上一次缓存的vnode进行对比,查看它们之间有哪些不一样的地方,找出这些不一样的地方并基于此去修改真实的DOM。
(2)Vue.js目前对状态的侦测策略采用了中等粒度。当状态发生改变时,只通知到组件级别,然后组件内使用虚拟DOM来渲染视图。
(3)当某个状态发生改变时,只通知使用了这个状态的组件。
(4)只要组件使用的众多状态中有一个发生了变化,那么整个组件就要重新渲染。
三、Vnode的类型
(1)vnode的类型
注释节点
文本节点
元素节点
组件节点
函数式组件
克隆节点
(2)vnode是Javascript中的一个对象,不同类型的vnode之间其实只是属性不同,准确地说是有效属性不同。因为当使用VNode类创建一个vnode时,通过参数为实例设置属性时,无效的属性会默认被赋值为undefined或false。对于vnode身上无效属性,直接忽略就好。
-
注释节点
export const createEmptyVNode = text =>{
const node = new VNode();
node.text = text;
node.isComment = true;
return node
}
(1)一个注释节点只有两个有效属性-----text和isComment,其余属性全是默认的undefined或则false。
// 注释节点
//对应的vnode如下:
{
text:"注释节点",
isComment:true
}
-
文本节点
export function createTextVNode(val){
return new VNode(undefined,undefined,undefined,String(val))
}
(1)文本类型的vnode被创建时,它只有一个text属性
//文本类型的vnode
{
text:"Hello Berwin"
}
-
克隆节点
(1)克隆节点是将现有节点的属性赋值到新节点中,让新创建的节点和被克隆的节点的属性保持一致,从而实现克隆效果。
(2)作用:优化静态节点和插槽节点(slot node)。
(3)以静态节点为例,当组件内的某个状态发生变化后,当前组件会通过虚拟DOM重新渲染视图,静态节点因为它的内容不会改变,所以除了首次渲染需要执行渲染函数获取vnode之外,后续更新不需要执行渲染函数重新生成vnode。因此,这时就会使用创建克隆节点的方法将vnode克隆一份,使用克隆节点进行渲染。这样就不需要重新执行渲染函数生成新的静态节点的vnode,从而提升一定程度的性能。
export function cloneVNode(vnode,deep){
const cloned = new VNode(
vnode.tag,
vnode.data,
vnode.children,
vnode.text,
vnode.elm,
vnode.context,
vnode.componentOptions,
vnode.asyncFactory
)
cloned.ns = vnode.;
cloned.isStatic = vnode.isStatic;
cloned.key = vnode.key;
cloned.isComment = vnode.isComment;
cloned.isCloned = true;
if(deep&&vnode.children){
cloned.chlidren = cloneVNodes(vnode.children);
}
return cloned;
}
(4)克隆现有节点时,只需要将现有节点的属性全部赋值到新节点中即可。
(5)克隆节点和被克隆节点之间的唯一区别是isCloned属性,克隆节点的isCloned为true,被克隆的原始节点的isCloned为false。
-
元素节点
(1)元素节点通常存在以下4种有效属性。
- tag:tag是一个节点的名称,例如ul、p、li和div等。
- data:该属性包含了一些节点上的数据,比如attrs、class和style等。
- children:当前节点的子节点列表。
- context:它是当前组件的Vue.js实例。
(2)例子
真实的元素节点
<p><span>Hello</span><span>Berwin</span></p>
对应的vnode
{
children:[VNode,VNode],
context:{...},
data:{...},
tag:"p",
....
}
-
组件节点
(1)组件节点和元素节点类似,有以下两个独有的属性
- componentOptions:组件节点的选项参数,其中包含propsData、tag和children等信息。
- componentInstance:组件的实例,也就是Vue.js实例。事实上,在Vue.js种,每个组件都是一个Vue.js实例。
(2)例子
一个组件节点
<child></child>
对应的vnode如下:
{
componentInstance:{...},
componentOptions:{...},
context:{...},
data:{...},
tag:"vue-component-1-child",
....
}
-
函数式组件
(1)函数式组件和组件节点类似,它有两个独有的属性functionalContext和functionalOptions。
(2)通常,一个函数式组件的vnode是下面的样子
{
functionalContext:{...},
functionalOptions:{...},
context:{...},
data:{...},
tag:"div",
....
}
四、总结
(1)vnode是一个类,可以生成不同类型的vnode实例,而不同类型的vnode表示不同类型的真实DOM元素。
(2)由于Vue.js对组件采用了虚拟DOM来更新视图,当属性发生变化时,整个组件都要进行重新渲染的操作,但组件内并不是所有DOM节点都需要更新,所以将vnode缓存并将当前新生成的vnode和上一次缓存的oldVnode进行对比,只对需要更新的部分进行DOM操作可以提升很多性能。
(3)vnode有多种类型,它们本质上都是从Vnode类实例化出的对象,其唯一区别只是属性不同。