VNode虚拟节点实例简析

 更新时间:2023年06月06日 09:06:19   作者:谛听  
这篇文章主要介绍了VNode虚拟节点,结合实例形式分析了VNode虚拟节点的基本功能、原理与实现方法,需要的朋友可以参考下

VNode说明&作用

VNode是什么

VNode是JavaScript对象。VNode表示Virtual DOM,用JavaScript对象来描述真实的DOMDOM标签,属性,内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: 'Hello Kitty', age: 1, children: null}

VNode的作用

通过rendertemplate模版描述成VNode,然后进行一系列操作之后形成真实的DOM进行挂载。

VNode的优点

  1. 兼容性强,不受执行环境的影响。VNode因为是JS对象,不管Node还是浏览器,都可以统一操作,从而获得了服务端渲染、原生渲染、手写渲染函数等能力。
  2. 减少操作DOM,任何页面的变化,都只使用VNode进行操作对比,只需要在最后一步挂载更新DOM,不需要频繁操作DOM,从而提高页面性能。

VNode如何生成

Vue源码中,VNode是通过一个构造函数生成的。

export default class VNode {
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }
}

VNode构造函数看起来十分简单,先走一遍VNode的生成过程。

// 模版
<a href="#" rel="external nofollow" >
    generator VNode
</a>
// VNode描述
{
  tag: 'a',
  data: {
    calss: 'demo',
    attrs: {
      href: '#'
    },
    style: {
      color: 'red'
    }
  },
  children: ['generator VNode']
}

这个JS对象,已经囊括了整个模板的所有信息,完全可以根据这个对象来构造真实DOM

VNode存放哪些信息

  1. data:存储节点的属性,绑定的事件等
  2. elm:真实DOM 节点
  3. context:渲染这个模板的上下文对象
  4. isStatic:是否是静态节点

VNode存放

在初始化完选项,解析完模板之后,就需要挂载DOM了。此时就需要生成VNode,才能根据 VNode生成DOM然后挂载。创建出来的VNode需要被存起来,主要存放在三个位置:parent_vnode$vnode

后记

VNode虚拟节点是Vue框架中一个非常重要的概念,深入的学习与了解,有助于进一步加深对Vue框架的理解与运用。

相关文章

  • Vue中props报错问题解决方案

    Vue中props报错问题解决方案

    这篇文章主要介绍了Vue中props报错问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 基于form-data请求格式详解

    基于form-data请求格式详解

    今天小编就为大家分享一篇基于form-data请求格式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue使用echarts可视化组件的方法

    Vue使用echarts可视化组件的方法

    这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍,需要的朋友可以参考下
    2021-07-07
  • vue devserver及其配置方法

    vue devserver及其配置方法

    这篇文章主要介绍了vue devserver及其配置方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    vue使用数组splice方法失效,且总删除最后一项的问题及解决

    这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • VUE实现自动滚动简单示例

    VUE实现自动滚动简单示例

    这篇文章主要给大家介绍了关于VUE实现自动滚动的相关资料,现在很多数据展示大屏都会有很多的自动滚动的列表,文中通过代码实例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue element-ui表格自定义动态列具体实现

    vue element-ui表格自定义动态列具体实现

    这周工作中遇见了一个表格动态列的需求,下面这篇文章主要给大家介绍了关于vue element-ui表格自定义动态列具体实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue使用vuedraggable实现嵌套多层拖拽排序功能

    vue使用vuedraggable实现嵌套多层拖拽排序功能

    这篇文章主要为大家详细介绍了vue使用vuedraggable实现嵌套多层拖拽排序功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue-Luckysheet的使用方法及遇到问题解决方法

    Vue-Luckysheet的使用方法及遇到问题解决方法

    Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源,这篇文章主要介绍了Vue-Luckysheet的使用方法,需要的朋友可以参考下
    2022-08-08
  • Vue数据代理的实现流程逐步讲解

    Vue数据代理的实现流程逐步讲解

    通过一个对象代理对另一个对象中的属性的操作(读/写),就是数据代理。要搞懂Vue数据代理这个概念,那我们就要从Object.defineProperty()入手,Object.defineProperty()是Vue中比较底层的一个方法,在数据劫持,数据代理以及计算属性等地方都或多或少的用到了本函数
    2023-01-01

最新评论