Vue 3 组件基础与模板语法详解

---

title: Vue 3 组件基础与模板语法详解
date: 2024/5/24 16:31:13
updated: 2024/5/24 16:31:13
categories:

• 前端开发

tags:

• Vue3特性
• CompositionAPI
• Teleport
• Suspense
• Vue3安装
• 组件基础
• 模板语法

---

Vue 3 简介

1. Vue 3 的新特性

Vue 3引入了许多新的特性，以提高框架的性能和可维护性。下面是一些主要的新特性：

• Composition API：这是Vue 3中最大的变化之一，它提供了一种更灵活的方式来组织和重用组件的逻辑。
• Teleport：这是一个新的API，允许我们在组件树中将元素“传送”到其他位置。
• Suspense：这是一个新的API，允许我们在组件树中等待异步数据加载。
• Fragment：这是一个新的内置组件，允许我们在组件中渲染多个根节点。
• v-memo：这是一个新的指令，允许我们在渲染过程中缓存组件的输出。
• 更快的渲染速度：Vue 3中的渲染器已经重写，提供了更快的渲染速度。

2. 安装与配置

要使用Vue 3，我们需要先安装它。可以使用npm或yarn来安装Vue 3：

npm install vue@next
# or
yarn add vue@next

安装完成后，我们可以在JavaScript中使用Vue 3：

import { createApp } from 'vue'

const App = {
data() {
return {
message: 'Hello Vue 3!'
}
}
}

const app = createApp(App)
app.mount('#app')

或者在HTML中使用Vue 3：

<script src="https://unpkg.com/vue@next"></script>

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

<script>
  const {createApp} = Vue

  const App = {
    data() {
      return {
        message: 'Hello Vue 3!'
      }
    }
  }

  const app = createApp(App)
  app.mount('#app')

Vue 3 组件基础

1. 组件的概念

在Vue中，组件是构成应用程序的基本单位。组件是独立的、可复用的Vue实例，具有自己的属性、事件、生命周期钩子等。组件可以看作是页面的最小单位，通过组合这些组件，我们可以构建出复杂的页面。

2. 组件的创建与注册

创建Vue组件的方式有多种，可以通过Vue的构造函数，也可以使用defineComponent函数。

// 使用Vue构造函数
const MyComponent = new Vue({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{
  
  { message }}</div>'
})

// 使用defineComponent
const MyComponent = defineComponent({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{
  
  { message }}</div>'
})

注册组件可以通过app.component方法，也可以在组件内部使用components选项。

// 全局注册
const app = createApp({})
app.component('my-component', MyComponent)

// 局部注册
const MyApp = createApp({})
MyApp.component('my-component', MyComponent)