vue3 setup 语法糖 按需加载子组件

Vue3的setup语法糖提供了一种简洁的方式来编写组件，它使得按需加载子组件变得更容易管理。`setup()`函数允许你在单文件组件中使用更接近于现代JavaScript的模式，而不是传统的选项式API。在这个函数中，你可以声明局部变量、计算属性以及异步生命周期钩子，并通过返回一个对象来配置组件的行为。

按需加载子组件通常发生在动态路由或条件渲染场景下。例如，你可以有一个父组件，在其模板内使用`<template>`标签，然后在运行时根据某些条件（比如props或Vuex状态）决定是否渲染某个子组件。这可以避免不必要的DOM渲染，提高性能。例如：

<template>
  <div v-if="shouldRenderChild">
    <child-component :props="childProps" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
const shouldRenderChild = ...; // 根据条件判断
const childProps = ...; // 可能从props或Vuex获取

export default {
  components: {
    ChildComponent
  },
  computed: {
    shouldRenderChild() {
      return /* 条件判断 */;
    }
  }
};
</script>