VNode说明&作用
VNode是什么
VNode是JavaScript对象。VNode表示Virtual DOM，用JavaScript对象来描述真实的DOM把DOM标签，属性，内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: 'Hello Kitty', age: 1, children: null}。
VNode的作用
通过render将template模版描述成VNode，然后进行一系列操作之后形成真实的DOM进行挂载。
VNode的优点
- 兼容性强，不受执行环境的影响。
VNode因为是JS对象，不管Node还是浏览器，都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力。 - 减少操作
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 class="demo" style="color: red" href="#"> generator VNode </a> // VNode描述 {
tag: 'a', data: {
calss: 'demo', attrs: {
href: '#' }, style: {
color: 'red' } }, children: ['generator VNode'] } 这个JS对象，已经囊括了整个模板的所有信息，完全可以根据这个对象来构造真实DOM。
VNode存放哪些信息
- data：存储节点的属性，绑定的事件等
- elm：真实DOM 节点
- context：渲染这个模板的上下文对象
- isStatic：是否是静态节点
…
VNode存放
在初始化完选项，解析完模板之后，就需要挂载DOM了。此时就需要生成VNode，才能根据 VNode生成DOM然后挂载。创建出来的VNode需要被存起来，主要存放在三个位置：parent，_vnode，$vnode。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211766.html原文链接：https://javaforall.net
