Vue3 比 Vue2 快的体现-第一部分

Vue3 比 Vue2 快的原因 首先体现在 Diff算法的优化上，

Vue2 中的 虚拟DOM对比采用全量对比策略，这样的话每次渲染也就把静态dom节点做对比了。在Vue3 中 Diff算法 优化了此项;

Vue2模板语法编译网站

Vue3模板语法编译网站把相同的一段Vue代码片段放到Vue2 与 Vue3的编译结果对比便能看出端倪

Vue2如下

<div>
  <p>HELLO WORLD</p>
  <div>{{msg}}</div>
</div>

// 编译后

function render() {
  with(this) {
    return _c('div', [_c('p', [_v("HELLO WORLD")]), _c('div', [_v(_s(msg))])])
  }
}

Vue3如下

<div>
  <p>HELLO WORLD</p>
  <div>{{msg}}</div>
</div>

// 编译后

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "HELLO WORLD"),
    _createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

由此可见，在{{msg}}对应的节点，Vue3做了标记 1 /*TEXT*/ 部分，说明此处是变化的，以后对比只对比变化的部分就好了;

关于这个flag的取值如下

• 动态文本节点 1
• 动态CLASS 2
• 动态STYLE 4
• 动态属性PROPS 8
• 具有动态KEY 属性 FULL_PROPS 16
• 带有监听事件的节点 32
• ...

剩下的还有几个，在此就不一一列举了