什么？你还不知道静态树提升

静态树提升

Vue 3 中的静态树提升是一种性能优化技术，它将静态组件及其子组件提升到父组件的 VNode 树中。这可以减少在初始化时的虚拟 DOM 遍历和渲染次数，提高应用程序的启动性能。

对比vue2

在 Vue 2 中，当一个组件被渲染时，它会创建一个新的 VNode 树，并将其添加到父组件的 VNode 树中。这意味着即使组件是静态的（即它的模板和数据在运行时不会发生变化），每次父组件重新渲染时，都会重新创建该组件的 VNode 树。

在 Vue 3 中，静态树提升通过在编译时将静态组件及其子组件提升到父组件的 VNode 树中来解决这个问题。这意味着在父组件重新渲染时，不需要重新创建静态组件的 VNode 树，而是可以直接重用现有的 VNode 树。

示例

下面是一个示例，展示了如何在 Vue 3 中使用静态树提升：

// 父组件
<template>
  <div>
    <StaticComponent />
    <DynamicComponent />
  </div>
</template>

<script>
export default {
  components: {
    StaticComponent,
    DynamicComponent
  }
};
</script>

// 静态组件
<template>
  <div>静态组件内容</div>
</template>

<script>
export default {
  name: 'StaticComponent'
};
</script>

// 动态组件
<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  name: 'DynamicComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

在上面的示例中， StaticComponent 是一个静态组件，它的模板和数据在运行时不会发生变化。 DynamicComponent 是一个动态组件，它的模板和数据可能会在运行时发生变化。

当父组件被渲染时， Vue 3 会将 StaticComponent 提升到父组件的 VNode 树中，因此在父组件重新渲染时，不需要重新创建 StaticComponent 的 VNode 树。而对于 DynamicComponent ，每次父组件重新渲染时，都需要创建新的 VNode 树。

通过使用静态树提升， Vue 3 可以减少在初始化时的虚拟 DOM 遍历和渲染次数，提高应用程序的启动性能。

静态树提升作用

静态树提升的主要好处是减少了在初始化时的虚拟 DOM 遍历和渲染次数。这可以提高应用程序的启动性能，特别是在应用程序中有大量静态组件的情况下。

需要注意的是，静态树提升只适用于静态组件，即其模板和数据在运行时不会发生变化的组件。对于动态组件，仍然需要在每次重新渲染时创建新的 VNode 树。

原文链接：https://juejin.cn/post/7336973329428824073 作者：云的风下清潭