setup语法糖

为什么要有setup语法糖：

在选择式API中，一个模块涉及到的数据、方法、声明周期，会比较分撒，位置不集中，不利于解读代码，但是组合式API中的setup函数可以将他们组织在一起，提高了代码的可维护性以及复用性，但是每次使用都要写setup函数，还需要将变量返回，所以引入了setup语法糖

setup函数原始写法：

<script>
export default{
    setup(){
        const message = 'This is message'
        const logMessage=()=>{
        console.log(message)
        }
        return{
            message,
            logMessage
        }
    }
}
<script>

setup函数的用法：

setup函数他的执行时机比beforeCreate更早，所以在setup函数中this的返回值是undefind,因此在setup函数中不使用this，

使用setup组件自动注册

注意下面对比

需要手动注册（在选择式API中）

<script>
    import ChildComponent from './ChildComponent.vue'
    export default{
        component:{
            ChildComponent
        }
    }
</script>
<template>
        <ChildComponent />
</template>

自动注册（组合式API）

<script setup>
    import ChildComponent from './ChildComponent.vue'
</script>
<template>
        <ChildComponent />
</template>

一般情况下，会自动注册，但是下面三种情况需要注意

动态组件(（需用 resolveComponent）)

<script setup>
import { resolveComponent } from 'vue'
​
const componentName = 'ChildComponent'
const ChildComponent = resolveComponent(componentName)
</script>
​
<template>
  <component :is="ChildComponent" />
</template>

递归组件（需显式引用自身）

<!-- TreeItem.vue -->
<script setup>
import TreeItem from './TreeItem.vue' // 导入自身
​
defineProps({
  data: Object
})
</script>
<template>
  <div>
    {{ data.name }}
    <TreeItem 
      v-for="child in data.children" 
      :key="child.id" 
      :data="child" 
    />
  </div>
</template>

全局组件（需通过 app.component 注册）

// main.ts
import { createApp } from 'vue'
import GlobalButton from './components/GlobalButton.vue'
​
const app = createApp(App)
app.component('GlobalButton', GlobalButton) // 全局注册

<script setup> 是 Vue 3 为 Composition API 设计的一种编译时语法糖，它通过更简洁的语法结构实现了与传统 setup() 函数相同的功能，但大幅减少了样板代码。使用这种语法时，所有顶层绑定的变量、函数和组件导入都会自动暴露给模板，无需手动返回对象；响应式数据（如 ref/reactive）可直接在模板中使用，组件也无需显式注册即可引用。同时它天然支持 TypeScript 类型推导，保留了完整的 Composition API 逻辑组织能力，让开发者既能保持关注点分离的优势，又能获得类似 Svelte 的简洁开发体验，最终编译时会转换为标准的组件选项语法，是 Vue 3 单文件组件开发的推荐模式。

动态组件

什么是动态组件： 最开始出现动态组件是在vue1版本中，解释如下：

动态组件：多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性

new Vue({
  el: 'body',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
​
<component :is="currentView">
  <!-- 组件在 vm.currentview 变化时改变 -->
</component>

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

<component :is="currentView" keep-alive>
  <!-- 非活动组件将被缓存 -->
</component>