Vue3的效率提升主要表现在哪些方面示例解析

// Vue2的静态节点
render(){
  return createVNode("h1", null, "Hello World")
  // ...
}
// Vue3的静态节点
const hoisted = createVNode("h1", null, "Hello World")
function render(){
  // 直接使用 hoisted 即可
}

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '静态标题',
      items: [
        { id: 1, name: '静态项1' },
        { id: 2, name: '静态项2' },
        { id: 3, name: '静态项3' }
      ]
    };
  }
};
</script>

const _hoisted_1 = { class: "title" };
const _hoisted_2 = { class: "item" };
return (_ctx) => {
  return (
    _openBlock(),
    _createBlock("div", null, [
      _createVNode("h1", _hoisted_1, _toDisplayString(_ctx.title), 1 /* TEXT */),
      _createVNode("ul", null, [
        (_openBlock(true),
        _createBlock(_Fragment, null, _renderList(_ctx.items, (item) => {
          return (_openBlock(), _createBlock("li", _hoisted_2, _toDisplayString(item.name), 1 /* TEXT */));
        }), 256 /* UNKEYED_FRAGMENT */))
      ])
    ])
  );
};

<button @click="count++">plus</button>

// vue2
render(ctx){
  return createVNode("button", {
    onClick: function($event){
      ctx.count++;
    }
  })
}
// vue3
render(ctx, _cache){
  return createVNode("button", {
    onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))
  })
}

// Vue2的条件渲染
render(){
  return this.show ? createVNode("h1", null, "Hello World") : null
  // ...
}
// Vue3的Block Tree
const _block_1 = this.show ? (openBlock(), createBlock("h1", null, "Hello World")) : null
function render(){
  return (_block_1)
}

// Vue2
function render() {
  with(this) {
    return _c('div', { staticClass: "container" }, [
      _c('h1', { staticClass: "title" }, [_v("Hello, Vue2!")]),
      _c('button', { on: { click: handleClick } }, [_v("Click me")])
    ])
  }
}
// Vue3
function render(_ctx, _cache) {
  return (_cache[0] || (_cache[0] = _createBlock("div", { class: "container" }, [
    _createVNode("h1", { class: "title" }, "Hello, Vue3!"),
    _createVNode("button", { onClick: _cache[1] || (_cache[1] = handleClick) }, "Click me")
  ])))
}

// Vue2的渲染
render(){
  return createVNode("h1", null, this.message)
  // ...
}
// Vue3的PatchFlag
const _hoisted_1 = this.message
function render(){
  return createVNode("h1", null, [_hoisted_1], PatchFlags.TEXT)
}