Vue

虚拟DOM

jQuery属于命令式操作DOM,Vue、React、Angular属于声明式操作。

Vue本质上是通过维护的数据状态来对映一个实际的DOM页面,改变数据的时候,如果直接得到新的DOM页面来更新肯定是不可取的,产生新的DOM页面来比较之后进行DOM操作也是很慢的,所以再产生中间的一个虚拟DOM节点构成的DOM树对象,使用patch比较两个对象的区别,再渲染出这个需要更新的DOM节点进行DOM的替代。

React和Angular的变化侦测不知道哪些状态改变了,Vue可以,所以Angular脏检查,React虚拟DOM暴力对比,Vue采用中粒度的算法;每个组件维护一个Watcher,状态改变通知到组件层面,在组件内再通过虚拟DOM的方法来对比和渲染。

vnode

虚拟DOM树中的虚拟节点,替代真实DOM节点。

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.functionalContext = undefined
this.functionalOptions = undefined
this.functionalScopeId = 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
}

get child (): Component | void {
return this.componentInstance
}
}

注释节点

export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true
return node
}

文本节点

export function createTextVNode (val: string | number) {
return new VNode(undefined, undefined, undefined, String(val))
}

克隆节点

一些静态节点,首次渲染后不需要再次通过数据来更新的节点,通过克隆来提升性能。

元素节点

4个有效属性

组件节点

函数式组件

有两个独有的属性。

patch

虚拟DOM比较和修改算法。