Vnode -- 理解

javascript操作Dom进行重绘整个视图层是相当消耗性能的，我们是不是可以每次只更新它的修改呢？所以Vue.js将Dom抽象成一个以javascript对象为节点的虚拟Dom树，以VNode节点模拟真实Dom，可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作，在这过程中都不需要操作真实Dom，只需要操作javascript对象，大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位，再将这些小单位的视图进行更新。这样做减少了很多不需要的Dom操作，大大提高了性能。

什么是虚拟DOM

虚拟DOM（Virtual DOM）是使用JavaScript对象描述真实DOM

为什么要使用虚拟DOM：

避免直接操作真实DOM，提高开发效率
作为一个中间层可以跨平台，支持web端渲染，还可以支持服务端渲染
虚拟DOM不一定可以提高性能：
首次渲染的时候会增加开销
复杂视图情况下提升渲染性能

vNode核心属性

export default class VNode {tag: string | void;data: VNodeData | void;children: ?Array<VNode>;text: string | void;elm: Node | void;ns: string | void;context: Component | void; // rendered in this component's scopefunctionalContext: Component | void; // only for functional component root nodeskey: string | number | void;componentOptions: VNodeComponentOptions | void;componentInstance: Component | void; // component instanceparent: VNode | void; // component placeholder noderaw: boolean; // contains raw HTML? (server only)isStatic: boolean; // hoisted static nodeisRootInsert: boolean; // necessary for enter transition checkisComment: boolean; // empty comment placeholder?isCloned: boolean; // is a cloned node?isOnce: boolean; // is a v-once node?constructor (tag?: string,data?: VNodeData,children?: ?Array<VNode>,text?: string,elm?: Node,context?: Component,componentOptions?: VNodeComponentOptions) {/*当前节点的标签名*/this.tag = tag/*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/this.data = data/*当前节点的子节点，是一个数组*/this.children = children/*当前节点的文本*/this.text = text/*当前虚拟节点对应的真实dom节点*/this.elm = elm/*当前节点的名字空间*/this.ns = undefined/*编译作用域*/this.context = context/*函数化组件作用域*/this.functionalContext = undefined/*节点的key属性，被当作节点的标志，用以优化*/this.key = data && data.key/*组件的option选项*/this.componentOptions = componentOptions/*当前节点对应的组件的实例*/this.componentInstance = undefined/*当前节点的父节点*/this.parent = undefined/*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/this.raw = false/*静态节点标志*/this.isStatic = false/*是否作为跟节点插入*/this.isRootInsert = true/*是否为注释节点*/this.isComment = false/*是否为克隆节点*/this.isCloned = false/*是否有v-once指令*/this.isOnce = false}// DEPRECATED: alias for componentInstance for backwards compat./* istanbul ignore next https://github.com/answershuto/learnVue*/get child (): Component | void {return this.componentInstance}
}

打个比方，比如说我现在有这么一个VNode树

{tag: 'div'data: {class: 'test'},children: [{tag: 'span',data: {class: 'demo'}text: 'hello,VNode'}]
}

渲染之后的结果就是这样的<div class="test"><span class="demo">hello,VNode</span>
</div>

Vnode的创建过程

下面这些方法都是一些常用的构造VNode的方法。

createEmptyVNode 创建一个空VNode节点
createTextVNode 创建一个文本节点
createComponent 创建一个组件节点

Vnode -- 理解相关推荐

虚拟DOM的VNode
摘自:深入浅出vue.js 在虚拟DOM中, VNode是比较重要的知识点,那么下面我们将介绍VNode. 1.什么是VNode 在Vue,js中存在一个VNode类,使用它可以实例化不同类型的vno ...
c++ gdb 绑定源码_【Vue原理】VNode 源码版
↑点击上方 "神仙朱" 一起研究Vue源码吧专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版 ...
【❌❌深入浅出，九浅一深⭕⭕】《深入理解计算机系统》CSAPP
<计算机系统基础>30' 一.处理器的时序电路 1.CPU中的时序电路答: CPU中的时序电路:通过RS触发器控制CPU的时序. 2.单周期处理器的设计答: CPU在处理指令时,一般需 ...
理解Vue 2.5的Diff算法
DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...
vue事件总线_[面试] 聊聊你对 Vue.js 框架的理解
作者:yacan8 https://github.com/yacan8/blog/issues/26 本文为一次前端技术分享的演讲稿,所以尽力不贴 Vue.js 的源码,因为贴代码在实际分享中,比较枯 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
JS每日一题:vue中keepalive怎么理解？
20190212问 vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue ...
实现 Virtual DOM 下的一个 VNode 节点
实现 Virtual DOM 下的一个 VNode 节点什么是VNode 我们知道,render function 会被转化成 VNode 节点.Virtual DOM 其实就是一棵以 JavaSc ...
React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...