vue中的VNode

VueJS的虚拟DOM是基于开源Snabbdom的。

前端发展很多年，直到出现了虚拟DOM，才可以从操作DOM解脱出来。

JQuery的出现，简化了操作DOM的过程，但是还是摆脱不了操作DOM。

而虚拟DOM的目的是，使用虚拟节点代替真实节点，所有操作都发生在虚拟节点，然后通过diff算法对比新旧两棵虚拟DOM，计算出更新真实DOM的最少操作，由框架代替用户执行这些操作，所以用户可以把大量的精力放在业务逻辑上。

VNode

在Vue里，使用VNode表示一个虚拟节点，在Vue里，VNode分两种类别：

普通VNode
组件VNode

它们的区别是普通VNode有children属性，而组件VNode的children属性为undefined。VNode 的结构如下：

// src/core/vdom/vnode.js
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 scopekey: string | number | void;componentOptions: VNodeComponentOptions | void;componentInstance: Component | void; // component instanceparent: VNode | void; // component placeholder node// strictly internalraw: 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?asyncFactory: Function | void; // async component factory functionasyncMeta: Object | void;isAsyncPlaceholder: boolean;ssrContext: Object | void;fnContext: Component | void; // real context vm for functional nodesfnOptions: ?ComponentOptions; // for SSR cachingfnScopeId: ?string; // functioanl scope id supportconstructor (tag?: string,data?: VNodeData,children?: ?Array<VNode>,text?: string,elm?: Node,context?: Component,componentOptions?: VNodeComponentOptions,asyncFactory?: Function) {this.tag = tag // 当前节点标签名this.data = data // 当前节点数据（VNodeData类型）this.children = children // 当前节点子节点this.text = text // 当前节点文本this.elm = elm // 当前节点对应的真实DOM节点this.ns = undefined // 当前节点命名空间this.context = context // 当前节点上下文this.fnContext = undefined // 函数化组件上下文this.fnOptions = undefined // 函数化组件配置项this.fnScopeId = undefined // 函数化组件ScopeIdthis.key = data && data.key // 子节点key属性this.componentOptions = componentOptions // 组件配置项 this.componentInstance = undefined // 组件实例this.parent = undefined // 当前节点父节点this.raw = false // 是否为原生HTML或只是普通文本this.isStatic = false // 静态节点标志 keep-alivethis.isRootInsert = true // 是否作为根节点插入this.isComment = false // 是否为注释节点this.isCloned = false // 是否为克隆节点this.isOnce = false // 是否为v-once节点this.asyncFactory = asyncFactory // 异步工厂方法 this.asyncMeta = undefined // 异步Metathis.isAsyncPlaceholder = false // 是否为异步占位}// 容器实例向后兼容的别名get child (): Component | void {return this.componentInstance}
}

在看VNode的时候小结以下几点：

所有对象的 context 选项都指向了 Vue 实例；
elm 属性则指向了其相对应的真实 DOM 节点；
DOM 中的文本内容被当做了一个只有 text 没有 tag 的节点；
像 class、id 等HTML属性都放在了 data 中。

vue中的VNode相关推荐

c++ gdb 绑定源码_【Vue原理】VNode 源码版
↑点击上方 "神仙朱" 一起研究Vue源码吧专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版 ...
Vue中插入HTML代码的方法
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做? 一.使用v-html v-html:更新元 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
JS每日一题:Vue中的diff算法？
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...
Vue 中的compile操作方式
这篇文章主要介绍了Vue 中的compile操作方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在 Vue 里,模板编译也是非常重要的一部分 ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
JS每日一题:vue中keepalive怎么理解？
20190212问 vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue ...

vue中的VNode

VNode

vue中的VNode相关推荐

最新文章

热门文章