• 售前

  • 售后

热门帖子
入门百科

Vue.js之VNode的利用

[复制链接]
二级传播盅 显示全部楼层 发表于 2021-10-26 12:59:35 |阅读模式 打印 上一主题 下一主题
什么是VNode


在vue.js中存在一个VNode类,使用它可以实例化不同范例的vnode实例,而不同范例的vnode实例各自体现不同范例的DOM元素。
比方,DOM元素有元素节点,文本节点,表明节点等,vnode实例也会对应着有元素节点和文本节点息争释节点。
VNode类代码如下:
  1. export default class VNode {
  2.     constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
  3.        this.tag = tag
  4.         this.data = data
  5.         this.children = children
  6.         this.text = text
  7.         this.elm = elm
  8.         this.ns = undefined
  9.         this.context = context
  10.         this.functionalContext = undefined
  11.         this.functionalOptions = undefined
  12.         this.functionalScopeId = undefined
  13.         this.key = data && data.key
  14.         this.componentOptions = componentOptions
  15.         this.componentInstance = undefined
  16.         this.parent = undefined
  17.         this.raw = false
  18.         this.isStatic = false
  19.         this.isRootInsert = true
  20.         this.isComment = false
  21.         this.isCloned = false
  22.         this.isOnce = false
  23.         this.asyncFactory = asyncFactory
  24.         this.asyncMeta = undefined
  25.         this.isAsyncPlaceholder = false
  26.     }
  27.     get child() {
  28.         return this.componentInstance
  29.     }
  30. }
复制代码
从上面的代码可以看出,vnode只是一个名字,本质上来说就是一个普通的JavaScript对象,是从VNode类实例化的对象。我们用这个JavaScript对象来描述一个真实DOM元素的话,那么该DOM元素上的全部属性在VNode这个对象上都存在对应得属性。
简朴来说,vnode可以明白成节点描述对象,他描述了应该怎样去创建真实的DOM节点。
比方,tag体现一个元素节点的名称,text体现一个文本节点的文本,children体现子节点等。vnode体现一个真实的DOM元素,全部真实的DOM节点都是用vnode创建并插入到页面中。
VNode创建DOM并插入到视图

图中展示了使用vnode创建真实的DOM并渲染到视图的过程。可以得知,vnode和视图是逐一对应的。我们可以把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.表明节点

由于创建表明节点的过程非常简朴,以是直接通过代码来介绍它有哪些属性:
  1.     export const createEmptyVNode = text => {
  2.         const node = new VNode()
  3.         node.text = text;
  4.         node.isComment = true;
  5.         return node
  6.     }
复制代码
一个表明节点只有两个有用属性 text 和 isComment。别的属性满是默认undefined或者false。
比方一个真实的表明节点,所对应的vnode是下面的样子:
  1. // <!-- 注释节点 -->
  2. {
  3.     text: "注释节点",
  4.     isComment: true
  5. }
复制代码
2.文本节点

文本节点的创建过程也非常简朴,代码如下:
  1.     export function createTextVNode(val) {
  2.         return new VNode(undefined, undefined, undefined, String(val))
  3.     }
复制代码
当文本范例的vnode被创建时,它只有一个text属性:
  1. {
  2.     text: "文本节点"
  3. }
复制代码
3.克隆节点

克隆节点是将现有节点的属性赋值到新节点中,让新创建的节点和被克隆的节点的属性保持同等,从而实现克隆结果。它的作用是优化静态节点和插槽节点(slot node)。
以静态节点为例,当组件内某个状态发生变化后,当前组件会通过假造DOM重新渲染视图,静态节点因为它的内容不会改变,以是除了初次渲染需要执行渲染函数获取vnode之外,后续更新不需要执行渲染函数重新天生vnode。
因此,这是就会使用创建克隆节点的方法将vnode克隆一份,使用克隆节点进行渲染。如许就不需要执行渲染函数天生新的静态节点的vnode,从而提升肯定的性能。
创建克隆节点的代码如下:
  1. export function cloneVNode(vnode, deep) {
  2.         const cloned = new VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory)
  3.         cloned.ns = vnode.ns
  4.         cloned.isStatic = vnode.isStatic
  5.         cloned.key = vnode.key
  6.         cloned.isComment = vnode.isComment
  7.         cloned.isCloned = true
  8.         if (deep && vnode.children) {
  9.             cloned.children = cloneVNodes(vnode.children)
  10.         }
  11.         return cloned
  12.     }
复制代码
克隆现有节点,只需要将现有节点的属性全部赋值到新节点中。
克隆节点和被克隆节点位移的区别是isCloned属性,克隆节点为true,被克隆的原始节点为false。
4.元素节点

元素节点通常会存在以下4中有用属性。
       
  • tag:tag就是一个节点的名称,比方 p、ul、li和div等。   
  • data:改属性包罗了一些节点上的数据,好比attrs、class和style等。   
  • children:当前节点的子节点列表。   
  • context:它是当前组件的Vue.js实例
一个真实的元素节点,对应得vnode是下面如许:
  1.     // <p><span>Hello</span><span>World</span></p>
  2.     {
  3.         children: [VNode, VNode],
  4.         context: {...},
  5.         data: {...},
  6.         tag: "p",
  7.         ...
  8.     }
复制代码
5.组件节点

组件节点和元素节点类似,有以下两个独有的属性。
componentOptions:组件节点的选项参数,其中包罗了propsData、tag和children等信息
componentInstance:组件的实例,也就是Vue.js的实例。究竟上,在Vue.js中,每个组件都有一个Vue.js实例。
一个组件节点,对应得vnode是下面如许:
  1.     // <child></child>
  2.     {
  3.         componentInstance: {...},
  4.         componentOptions: {...},
  5.         context: {...},
  6.         data: {...},
  7.         tag: "vue-component-1-child",
  8.         ...   
  9.     }
复制代码
6.函数式节点

函数式节点和组件节点类似,他有两个独有的属性functionalContext和functionalOptions。
通常,一个函数式节点的vnode是下面如许:
  1.      {
  2.         functionalContext: {...},
  3.         functionalOptions: {...},
  4.         context: {...},
  5.         data: {...},
  6.         tag: "div"
  7.       }
复制代码
总结


VNode是一个类,可以生产不同范例的vnode实例,不同范例的实例体现不同范例的真实DOM。
由于Vue.js对组件接纳了假造DOM来更新视图,当属性发生变化时,整个组件都要进行重新渲染的操纵,但组件内并不是全部的DOM节点都需要更新,以是将vnode缓存并将当前新天生的vnode和缓存的vnode作对比,只对需要更新的部门进行DOM操纵可以提升许多的性能。
vnode有许多范例,它们本质上都是Vnode实例化出的对象,其唯一区别是属性不同。

到此这篇关于Vue.js之VNode的使用的文章就介绍到这了,更多干系VNode使用内容请搜刮脚本之家从前的文章或继承浏览下面的干系文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作