vue deno,vueisnotdefined
本文主要介绍Vue.js的VNode的使用方法，通过示例代码非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
什么是VNode
vue.js中有一个vnode类，可以用来实例化不同类型的vnode实例，不同类型的VNode实例各自代表不同类型的DOM元素。
例如，DOM元素包括元素节点、文本节点、注释节点等。和vnode实例也对应于元素节点、文本节点和注释节点。
VNode类代码如下：
导出默认类VNode {
构造函数(标记、数据、子元素、文本、elm、上下文、componentOptions、asyncFactory) {
this.tag=标签
this.data=数据
this.children=儿童
this.text=text
this.elm=榆树
this.ns=未定义
this.context=上下文
this . functional context=undefined
this.functionalOptions=未定义
this.functionalScopeId=未定义
this.key=data data.key
this . component options=component options
this . component instance=undefined
this.parent=undefined
this.raw=false
this.isStatic=false
this.isRootInsert=true
this.isComment=false
this.isCloned=false
this.isOnce=false
this.asyncFactory=异步工厂
this.asyncMeta=undefined
this.isAsyncPlaceholder=false
}
get child() {
返回this.componentInstance
}
}
从上面的代码可以看出，VNode只是一个名字。本质上，它是从vnode类实例化的普通JavaScript对象。如果我们用这个JavaScript对象来描述一个真实的DOM元素，那么DOM元素上的所有属性在VNode对象上都有对应的属性。
简单来说，vnode可以理解为一个节点描述对象，描述如何创建真正的DOM节点。
例如，tag表示元素节点的名称，text表示文本节点的文本，children表示子节点。Vnode表示一个真实的DOM元素，所有真实的DOM节点都是用vnode创建的，并被插入到页面中。
VNode创建DOM并将其插入到视图中
该图展示了用vnode创建一个真实的DOM并将其呈现给视图的过程。可以知道，vnode和view是一一对应的。我们可以把vnode理解为JavaScript对象版本的DOM元素。
渲染视图的过程是先创建vnode，然后用vnode生成真正的DOM元素，最后插入页面渲染视图。
VNode的作用
因为每次渲染视图的时候都是先创建一个vnode，然后把它创建的真实DOM插入到页面中，这样就可以缓存上次视图渲染时创建的vnode了。然后，每当需要重新渲染视图时，就将新创建的vnode与上次缓存的vnode进行比较，看看它们之间有什么不同，找出不同之处，并基于它们修改真实的DOM。
目前，Vue.js采用中等粒度的状态检测策略。当状态改变时，只通知组件级，然后在组件中使用虚拟DOM来呈现视图。
如下图所示，当某个状态发生变化时，只有使用该状态的组件会得到通知。也就是说，只要组件使用的许多状态中的一个发生变化，整个组件就会被重新渲染。
如果组件只有一个节点发生了变化，那么重新渲染整个组件的所有节点显然会造成性能的极大浪费。因此，唤醒vnode缓存并将最后一个缓存与当前创建的vnode进行比较非常重要，以便只更新有差异的节点。这也是vnode最重要的功能。
VNode的类型
有许多不同类型的vnode，包括以下几种：
注释节点
文本节点
元素节点
组件节点
功能节点
克隆节点
前面介绍过vnode是一个JavaScript对象，不同类型的vnode其实有不同的属性，准确的说是不同的有效属性。因为使用vnode类创建VNode时，通过参数为实例设置属性时，无效属性默认会设置为undefined或false。只需忽略vnode上的无效属性。
1.注释节点
因为创建注释节点的过程非常简单，所以它的属性是通过代码直接引入的：
export const createEmptyVNode=text={
const node=新VNode()
node.text=文本；
node.isComment=true
返回节点
}
注释节点只有两个有效属性，text和isComment。默认情况下，其他属性都是未定义的或假的。
比如一个真实的注释节点，对应的vnode如下：
//!-注释节点-
{
文本：“注释节点”，
isComment: true
}
2.文本节点
创建节点的过程也非常简单，代码如下：
导出函数createTextVNode(val) {
返回新的VNode(未定义，未定义，未定义，字符串(val))
}
创建文本类型的vnode时，它只有一个文本属性：
{
文本：“文本节点”
}
3.克隆节点
克隆节点是将已有节点的属性赋给新节点，使新创建的节点与克隆节点的属性一致，从而达到克隆的效果。它的功能是优化静态节点和槽节点。
以静态节点为例。当组件中的一个状态改变时，当前组件将通过虚拟DOM重新呈现视图。因为静态节点的内容不会改变，所以后续的更新除了第一次渲染之外，不需要执行渲染函数来重新生成vnode。
因此，我们将通过创建克隆节点来克隆vnode的副本，并使用克隆节点来渲染它。这样就不需要执行渲染函数来生成静态节点的新vnode，从而提高了一定的性能。
创建克隆节点的代码如下：
导出函数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.ns
cloned.isStatic=vnode.isStatic
cloned.key=vnode.key
cloned . is comment=vnode . is comment
cloned.isCloned=true
if (deep vnode.children) {
cloned . children=clonev nodes(vnode . children)
}
返回克隆的
}
要克隆现有节点，需要将现有节点的所有属性分配给新节点。
克隆节点和克隆节点的位移区别是isCloned属性，克隆节点为真，克隆原始节点为假。
4.元素节点
一个元素通常有以下4个有效属性。
Tag:tag是节点的名称，如p、ul、li、div等。
数据：改变属性包括一些节点上的数据，如attrs、class和style。
Children:当前节点的子节点列表。
Context:是当前组件的Vue.js的实例。
一个实元素节点，对应的vnode如下：
//pspanHello/spanspanWorld/span/p
{
孩子：[VNode，VNode]，
上下文：{.},
数据：{.},
标签:“p”，
.
}
5.组件节点
组件节点类似于元素节点，具有以下两个独特的属性。
ComponentOptions:组件节点的选项参数，包含propsData、tag、children等信息。
ComponentInstance:组件的实例，即Vue.js的实例.实际上，在Vue.js中，每个组件都有一个vue.js的实例。
一个组件节点及其对应的vnode如下：
//子/子
{
组件实例：{.},
组件选项：{.},
上下文：{.},
数据：{.},
标签:“vue-组件-1-子组件”，
.
}
6.函数式节点
功能节点类似于组件节点，因为它有两个唯一的属性，functionalContext和functionalOptions。
通常，功能节点的vnode如下：
{
功能上下文：{.},
功能选项：{.},
上下文：{.},
数据：{.},
标签:“div”
}
总结
Vnode是一个类，可以产生不同类型的VNode实例，不同类型的实例代表不同类型的真实DOM。
因为Vue.js使用虚拟DOM来更新组件的视图，所以当属性发生变化时，整个组件都要重新渲染，而不是组件中的所有DOM节点都需要更新。所以缓存vnode，将当前新生成的vnode与缓存的vnode进行比较，只对需要更新的部分进行DOM操作，可以提升很多性能。
vnode有很多种类型，本质上都是Vnode实例化的对象。唯一不同的是它们的属性不同。
关于Vue.js的VNode的使用，本文就讲到这里。有关VNode使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。