Vue 3 基础笔记 3 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 11 天，今天在开发组队大项目的

这是我参与「第五届青训营」伴学笔记创作活动的第 11 天，今天在开发组队大项目的过程中，继续学习了如何从头开发一个 Vue 3 的项目，包括 Vue 3 的基础语法等。

组合式 API

组合式 API 为 Vue 3 新提出的代码风格，在组合式 API 中，是通过使用导入的 API 函数来描述组件逻辑。

基本用法

编写选项式 API 需在 <script> 代码中导入 Vue 提供的 API 函数，比如：

import { reactive } from 'vue'

然后和选项式 API 类似需在 <script> 代码中默认导出一个对象，对象中包含一个 setup() 函数，在 setup() 函数中可以定义响应式数据、函数等组件的逻辑，将定义的内容通过 return 返回，比如：

export default {
  setup() {
    const count = ref(0)

    return {
      count
    }
  }
}

使用 `<script setup>` 语法糖

除了这种方式外，在单文件组件 (SFC) 还可以使用 <script setup> 语法糖：只需把 <script> 改成 <script setup>。这样 <script setup> 内可以直接编写 setup() 函数的内容，不用默认导出 setup() 函数，而且无需使用 return 返回定义的内容。比如上述代码可以改写为：

import { reactive } from 'vue'
const count = ref(0)

组合式 API 的使用

定义响应式数据

`reactive()` 函数

从 vue 导入 reactive 后，使用 reactive() 函数创建一个响应式对象或数组：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

如果不使用 <script setup> 语法糖，需要在 setup() 函数最后返回的对象中加上定义的响应式数据。

要在模板中使用响应式对象或数组，直接访问对象或数组名称即可：

<div>{{ state.count }}</div>

要在 <script> 中使用响应式对象或数组，直接访问对象或数组名称即可：

function increment() {
    state.count++
}

`ref()` 函数

从 vue 导入 ref 后，使用 ref() 定义响应式变量（不只是对象或数组）：

import { ref } from 'vue'

const count = ref(0)

要在模板中使用响应式变量，直接访问变量名称即可（模板中会对 ref 对象自动 .value）：

<div>{{ count }}</div>

要在 <script> 中使用响应式变量，需要在变量名称后加上 .value，因为直接访问变量名称会得到一个带 .value 属性的 ref 对象：

console.log(count) // { value: 0 }
console.log(count.value) // 0

定义计算属性

从 vue 导入 computed 后，使用 computed() 函数创建一个计算属性：

computed() 函数接收一个 getter 函数参数，这个函数返回计算结果。

computed() 函数返回一个计算属性 ref，需要使用一个变量接收。

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

要在模板中使用计算属性，直接访问变量名称即可（模板中会对 ref 对象自动 .value）：

要在 <script> 中使用计算属性，需要在变量名称后加上 .value，因为直接访问变量名称会得到一个 ref 对象：

定义函数

像定义 JavaScript 函数那样定义即可：

function increment() {
    state.count++
}

如果不使用 <script setup> 语法糖，需要在 setup() 函数最后返回的对象中加上定义的函数。

要在模板中或者 <script> 中使用函数，直接访问函数名称即可。

使用生命周期钩子

从 vue 导入生命周期钩子函数比如 onMounted 后，在 setup() 函数中使用生命周期钩子函数。

生命周期钩子函数传入一个参数，这个参数为要执行的函数。

import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})

生命周期钩子所传入的函数会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。

以下为完整的组件生命周期：

Vue 3 基础笔记 3 | 青训营笔记