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

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

Vue 中 JavaScript 代码语法

在单文件组件 .vue 文件中的 <script> 编写 JavaScript 代码来为组件定义行为，包括组件的数据、方法、组件之间的数据交换等等。

在调用 Vue 3 提供的 API 时，有两种 API 编写规范¹，分别是选项式 API (Options API) 和组合式 API (Composition API)。

选项式 API 为 Vue 2 的代码风格，在选项式 API 中，使用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

编写选项式 API 只需在 <script> 代码中暴露 export default 一个对象，这个对象为 Vue 选项。

在 Vue 选项中可以配置各种各样的组件定义行为，包括组件的数据、方法、组件之间的数据交换等等。

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

定义响应式数据只需要在选项对象中添加一个 data() 函数，这个函数返回一个对象，这个对象中的数据会被定义为响应式数据（当数据变化时会同步修改使用这个数据的模板）。

data() {
    return {
        count: 0
    }
},

在组件的模板中（例如文本插值等）通过数据名称访问数据。

在组件的 <script> 中通过 this. 加上数据名称访问数据。

定义函数只需要在选项对象中添加一个 methods:{} 对象，这个对象包含若干个函数，这些函数可以在组件中使用。

methods: {
    increment() {
        this.count++
    }
},

在组件的模板中（例如事件监听器的回调函数）通过函数名称访问函数。

在组件的 <script> 中通过 this. 加上函数名称访问函数。

使用生命周期钩子只需要在选项对象中添加例如 mounted() 的生命周期钩子函数，这些函数会在组件生命周期的各个不同阶段被调用。

例如这个函数就会在组件挂载完成后被调用：

mounted() {
    console.log(`The initial count is ${this.count}.`)
}