01. 介绍

选项式和组合式

Vue3 提供了两种编码方式：选项式 API 和 组合式 API

• 选项式 API (Options API)：类似 Vue2 ，以“组件实例”的概念为中心（this）使用选项配置来组织代码
• 组合式 API (Composition API)：直接在函数作用域内定义响应式状态变量，更灵活更强大

setup

是一个组件创建时调用的一个生命周期钩子函数，专门用于组合式 API

<script>
import { reactive } from 'vue'
 
export default {
  setup() {
    const state = reactive({ count: 0 })
    
    // 需要 return 暴露 state 到模板中
    return {
      state
    }
  }
}
</script>

简洁写法，在 script 标签上加 setup（不需要 return）：

<script setup>
import { reactive } from 'vue'
 
const state = reactive({ count: 0 })
</script>

推荐采用：组合式 API + 单文件组件 + <script setup>

为什么在 setup 里才能写 Composition API？

因为 setup 提供了 Composition API 所依赖的生命周期钩子和上下文

创建实例

createApp() 来创建实例：

import { createApp } from 'vue'
 
import App from './App.vue' // 从一个单文件组件中导入根组件
 
const app = createApp(App)

此时创建了一个 Vue 实例，还没有挂载到 DOM，应用实例必须在调用了 .mount() 方法后才会渲染出来：

<div id="app"></div>
 
app.mount('#app')

生命周期

主要分为四个阶段：

	选项式	组合式
创建	beforeCreate、created	setup
挂载	beforeMount、mounted	onBeforeMount、onMounted
更新	beforeUpdate、updated	onBeforeUpdate、onUpdated
销毁	beforeUnmount、unmounted	onBeforeUnmount、onUnmounted

钩子列表：

组合式 API：生命周期钩子 | Vue.js