滁州网站定制,三亚专业网站建设,西安保洁公司网站建设,如何外贸网络推广#x1f3ac; 岸边的风#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录
一、什么是虚拟DOM
二、为什么需要虚拟DOM
三、如何实现虚拟DOM
小结 一、什么是虚拟DOM
虚拟 DOM #xff08… 岸边的风个人主页 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想就是为了理想的生活 ! 目录
一、什么是虚拟DOM
二、为什么需要虚拟DOM
三、如何实现虚拟DOM
小结 一、什么是虚拟DOM
虚拟 DOM Virtual DOM 这个概念相信大家都不陌生从 React 到 Vue 虚拟 DOM 为这两个框架都带来了跨平台的能力React-Native 和 Weex
实际上它只是一层对真实DOM的抽象以JavaScript 对象 (VNode 节点) 作为基础的树用对象的属性来描述节点最终可以通过一系列操作使这棵树映射到真实环境上
在Javascript对象中虚拟DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性不同框架对这三个属性的名命可能会有差别
创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中所以虚拟DOM对象的节点与真实DOM的属性一一照应
在vue中同样使用到了虚拟DOM技术
定义真实DOM
div idappp classp节点内容/ph3{{ foo }}/h3
/div
实例化vue
const app new Vue({el:#app,data:{foo:foo}
})
观察render的render我们能得到虚拟DOM
(function anonymous(
) {with(this){return _c(div,{attrs:{id:app}},[_c(p,{staticClass:p},[_v(节点内容)]),_v( ),_c(h3,[_v(_s(foo))])])}})
通过VNodevue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作 经过diff算法得出一些需要修改的最小单位,再更新视图减少了dom操作提高了性能
二、为什么需要虚拟DOM
DOM是很慢的其元素非常庞大页面的性能问题大部分都是由DOM操作引起的
真实的DOM节点哪怕一个最简单的div也包含着很多属性可以打印出来直观感受一下 由此可见操作DOM的代价仍旧是昂贵的频繁操作还是会出现页面卡顿影响用户的体验
举个例子
你用传统的原生api或jQuery去操作DOM时浏览器会从构建DOM树开始从头到尾执行一遍流程
当你在一次操作时需要更新10个DOM节点浏览器没这么智能收到第一个更新DOM请求后并不知道后续还有9次更新操作因此会马上执行流程最终执行10次流程
而通过VNode同样更新10个DOM节点虚拟DOM不会立即操作DOM而是将这10次更新的diff内容保存到本地的一个js对象中最终将这个js对象一次性attach到DOM树上避免大量的无谓计算 很多人认为虚拟 DOM 最大的优势是 diff 算法减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程实现了跨平台的能力而不仅仅局限于浏览器的 DOM可以是安卓和 IOS 的原生组件可以是近期很火热的小程序也可以是各种GUI 三、如何实现虚拟DOM
首先可以看看vue中VNode的结构
源码位置src/core/vdom/vnode.js
export default class VNode {tag: string | void;data: VNodeData | void;children: ?ArrayVNode;text: string | void;elm: Node | void;ns: string | void;context: Component | void; // rendered in this components 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?: ?ArrayVNode,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的时候为truetextContent的时候为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进行稍微的说明
所有对象的 context 选项都指向了 Vue 实例elm 属性则指向了其相对应的真实 DOM 节点
vue是通过createElement生成VNode
源码位置src/core/vdom/create-element.js
export function createElement (context: Component,tag: any,data: any,children: any,normalizationType: any,alwaysNormalize: boolean
): VNode | ArrayVNode {if (Array.isArray(data) || isPrimitive(data)) {normalizationType childrenchildren datadata undefined}if (isTrue(alwaysNormalize)) {normalizationType ALWAYS_NORMALIZE}return _createElement(context, tag, data, children, normalizationType)
}
上面可以看到createElement 方法实际上是对 _createElement 方法的封装对参数的传入进行了判断
export function _createElement(context: Component,tag?: string | ClassComponent | Function | Object,data?: VNodeData,children?: any,normalizationType?: number
): VNode | ArrayVNode {if (isDef(data) isDef((data: any).__ob__)) {process.env.NODE_ENV ! production warn(Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n Always create fresh vnode data objects in each render!,context)return createEmptyVNode()}// object syntax in v-bindif (isDef(data) isDef(data.is)) {tag data.is}if (!tag) {// in case of component :is set to falsy valuereturn createEmptyVNode()}... // support single function children as default scoped slotif (Array.isArray(children) typeof children[0] function) {data data || {}data.scopedSlots { default: children[0] }children.length 0}if (normalizationType ALWAYS_NORMALIZE) {children normalizeChildren(children)} else if ( SIMPLE_NORMALIZE) {children simpleNormalizeChildren(children)}// 创建VNode...
}
可以看到_createElement接收5个参数 context 表示 VNode 的上下文环境是 Component 类型 tag 表示标签它可以是一个字符串也可以是一个 Component data 表示 VNode 的数据它是一个 VNodeData 类型 children 表示当前 VNode 的子节点它是任意类型的 normalizationType 表示子节点规范的类型类型不同规范的方法也就不一样主要是参考 render 函数是编译生成的还是用户手写的
根据normalizationType 的类型children会有不同的定义
if (normalizationType ALWAYS_NORMALIZE) {children normalizeChildren(children)
} else if ( SIMPLE_NORMALIZE) {children simpleNormalizeChildren(children)
}
simpleNormalizeChildren方法调用场景是 render 函数是编译生成的
normalizeChildren方法调用场景分为下面两种
render 函数是用户手写的编译 slot、v-for 的时候会产生嵌套数组
无论是simpleNormalizeChildren还是normalizeChildren都是对children进行规范使children 变成了一个类型为 VNode 的 Array这里就不展开说了
规范化children的源码位置在src/core/vdom/helpers/normalzie-children.js
在规范化children后就去创建VNode
let vnode, ns
// 对tag进行判断
if (typeof tag string) {let Ctorns (context.$vnode context.$vnode.ns) || config.getTagNamespace(tag)if (config.isReservedTag(tag)) {// 如果是内置的节点则直接创建一个普通VNodevnode new VNode(config.parsePlatformTagName(tag), data, children,undefined, undefined, context)} else if (isDef(Ctor resolveAsset(context.$options, components, tag))) {// component// 如果是component类型则会通过createComponent创建VNode节点vnode createComponent(Ctor, data, context, children, tag)} else {vnode new VNode(tag, data, children,undefined, undefined, context)}
} else {// direct component options / constructorvnode createComponent(tag, data, context, children)
}
createComponent同样是创建VNode
源码位置src/core/vdom/create-component.js
export function createComponent (Ctor: ClassComponent | Function | Object | void,data: ?VNodeData,context: Component,children: ?ArrayVNode,tag?: string
): VNode | ArrayVNode | void {if (isUndef(Ctor)) {return}// 构建子类构造函数 const baseCtor context.$options._base// plain options object: turn it into a constructorif (isObject(Ctor)) {Ctor baseCtor.extend(Ctor)}// if at this stage its not a constructor or an async component factory,// reject.if (typeof Ctor ! function) {if (process.env.NODE_ENV ! production) {warn(Invalid Component definition: ${String(Ctor)}, context)}return}// async componentlet asyncFactoryif (isUndef(Ctor.cid)) {asyncFactory CtorCtor resolveAsyncComponent(asyncFactory, baseCtor, context)if (Ctor undefined) {return createAsyncPlaceholder(asyncFactory,data,context,children,tag)}}data data || {}// resolve constructor options in case global mixins are applied after// component constructor creationresolveConstructorOptions(Ctor)// transform component v-model data into props eventsif (isDef(data.model)) {transformModel(Ctor.options, data)}// extract propsconst propsData extractPropsFromVNodeData(data, Ctor, tag)// functional componentif (isTrue(Ctor.options.functional)) {return createFunctionalComponent(Ctor, propsData, data, context, children)}// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners data.on// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on data.nativeOnif (isTrue(Ctor.options.abstract)) {const slot data.slotdata {}if (slot) {data.slot slot}}// 安装组件钩子函数把钩子函数合并到data.hook中installComponentHooks(data)//实例化一个VNode返回。组件的VNode是没有children的const name Ctor.options.name || tagconst vnode new VNode(vue-component-${Ctor.cid}${name ? -${name} : },data, undefined, undefined, undefined, context,{ Ctor, propsData, listeners, tag, children },asyncFactory)if (__WEEX__ isRecyclableComponent(vnode)) {return renderRecyclableComponentTemplate(vnode)}return vnode
}
稍微提下createComponent生成VNode的三个关键流程
构造子类构造函数Ctor installComponentHooks安装组件钩子函数实例化 vnode
小结
createElement 创建 VNode 的过程每个 VNode 有 childrenchildren 每个元素也是一个VNode这样就形成了一个虚拟树结构用于描述真实的DOM树结构
