Vue 虚拟DOM

参考链接

https://juejin.cn/post/7130538545063657486

VNode结构

interface vnode {
    type: String;
    props: Object;
    children: vnode[];
}

interface vnode {
    type: String;
    props: Object;
    children: vnode[];
}

举个简单的例子：

vue

<template>
	<div id="hello">
        Venki!
    </div>
</template>

<script>
	const vnode = {
        type: 'div',
        props: {
            id: 'hello'
        },
        children: [
            "Venki!"
        ]
    }
</script>

<template>
	<div id="hello">
        Venki!
    </div>
</template>

<script>
	const vnode = {
        type: 'div',
        props: {
            id: 'hello'
        },
        children: [
            "Venki!"
        ]
    }
</script>

虚拟DOM优缺点

优点

降低性能消耗
diff算法减少重绘与回流
跨平台

缺点

首次加载相比直接的innerHTML插入，多了生成虚拟DOM的步骤
无法实现极致的性能优化，也是因为需要生成虚拟DOM

虚拟DOM一定比操作原生DOM要快吗

这是一个性能 Vs. 可维护性的问题。框架的意义在于为你掩饰底层的DOM操作，让你可以用更加声明式的方式描述你的目的，从而使得代码能够更简单的维护。
在这一情况下，没有任何框架可以比手动优化DOM操作更快，==因为框架的DOM操作需要应对任何上层API可能产生的操作，它的实现必须有普适性==
在构建实际应用的时候，不可能为每一个地方去做手动优化，框架的意义在于，它能够在你不需要进行额外优化的情况下，提供一个较好的性能

总结：

虚拟DOM的意义并不是提升性能，而是提升开发的效率，使用框架使得我们不需要考虑对DOM的操作，只需要关心数据的改变，使用JQuery的时候，数据改变后我们还需要进行$(#id).append(node)的操作。

并且，事实上，“合理地”直接操作DOM性能永远是最高的，“合理”指的是尽量减少操作的次数。所以，直接操作DOM是上限最高，但是下限较低的操作，而虚拟DOM提供了一个较高的下限，并且降低了使用者的心智负担。

Diff算法

TIP

上面说到，如果能“合理地”直接操作DOM元素，它的性能是最好的。那么其实虚拟DOM的实现，也同样是在进行“合理地”操作DOM元素，只是这个“合理”操作是框架底层实现的，而实现的关键方法就是在于diff算法。

Vue 虚拟DOM ​

参考链接 ​

VNode结构 ​

虚拟DOM优缺点 ​

优点 ​

缺点 ​

Diff算法 ​

Vue 虚拟DOM

参考链接

VNode结构

虚拟DOM优缺点

优点

缺点

Diff算法