Vue 3 指南——第 03 章：应用实例

前言

在前面的章节中，我们已经学习了 Vue 3 的基本概念和特性。在本章中，我们将开始构建一个简单的 Vue 应用，以帮助您更好地理解 Vue 3 的工作原理。

Vue 组件

Vue 组件是 Vue 应用的基本构建块。每个组件都是一个独立的单元，负责处理特定的功能。组件可以被重用，这使得构建复杂应用变得更加容易。

创建组件

要创建一个组件，可以使用 Vue CLI 脚手架工具。Vue CLI 是一个命令行工具，可以帮助您快速搭建 Vue 项目。

vue create my-project

创建项目后，您可以在 src 目录下看到一个名为 App.vue 的文件。App.vue 是应用的根组件。

<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>

在这个组件中，我们定义了一个名为 message 的数据属性，并在模板中使用它。当组件被渲染时，它将在页面上显示 "Hello, world!"。

使用组件

要使用组件，可以使用 import 语句将其导入到其他组件中。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

在上面的代码中，我们导入了 MyComponent 组件，并在模板中使用它。当组件被渲染时，它将在页面上显示 "Hello, world!"。

Vue 实例

Vue 实例是 Vue 应用的核心。它负责管理组件、数据和生命周期。

初始化实例

要初始化实例，可以使用 Vue.createApp() 方法。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, world!'
    }
  }
})

在上面的代码中，我们创建了一个实例并为其添加了一个名为 message 的数据属性。

挂载实例

要挂载实例，可以使用 mount() 方法。

app.mount('#app')

在上面的代码中，我们将实例挂载到名为 app 的元素上。当实例被挂载时，它将在页面上显示 "Hello, world!"。

生命周期

Vue 实例的生命周期包括以下几个阶段：

• beforeCreate: 在实例创建之前触发
• created: 在实例创建之后触发
• beforeMount: 在实例挂载之前触发
• mounted: 在实例挂载之后触发
• beforeUpdate: 在实例更新之前触发
• updated: 在实例更新之后触发
• beforeDestroy: 在实例销毁之前触发
• destroyed: 在实例销毁之后触发

您可以在实例上使用生命周期钩子来执行特定的任务。例如，您可以在 mounted 钩子中执行一些初始化任务，在 destroyed 钩子中释放资源。

Vue 方法

Vue 实例可以调用方法来执行特定的任务。例如，您可以使用 setData() 方法来更新数据。

app.setData({
  message: 'Hello, Vue!'
})

在上面的代码中，我们使用 setData() 方法将 message 的值更新为 "Hello, Vue!"。当数据更新后，组件将自动重新渲染。

结语

在本指南中，我们学习了 Vue 3 的应用实例，包括 Vue 组件的创建和使用，Vue 实例的初始化和生命周期，以及 Vue 方法的调用等内容。希望这些知识对您构建 Vue 应用有所帮助。