「Vue3系列」Vue3 组件

一、Vue3 组件

Vue3 是 Vue.js 的最新版本，它引入了许多新的特性和改进。在 Vue3 中，组件是构建应用程序的核心部分，它们可以重用、组合和嵌套。Vue3 中的一些常用组件包括：

1. Fragment：在 Vue2 中，每个组件必须有一个根标签，但在 Vue3 中，组件可以没有根标签，其内部会将多个标签包含在一个 Fragment 虚拟元素中。这有助于减少标签层级，使代码更简洁。
2. Teleport（传送门）：这是一个可以将组件的 HTML 结构移动到指定位置的功能。使用 <teleport> 标签可以实现这一功能，它可以将子组件渲染到 DOM 中任何位置，而不仅仅是其父组件内部。
3. Suspense：这是一个用于处理异步组件的组件。当异步组件加载过程中，Suspense 可以渲染一些额外的内容，以提供更好的用户体验。例如，可以在异步组件加载时显示一个加载提示，当组件加载完成后再显示实际内容。

二、Vue3 组件实例

在 Vue 3 中，组件的创建和使用与 Vue 2 有一些不同，尤其是在组合式 API 的引入下。下面是一个简单的 Vue 3 组件实例代码，展示了如何创建一个名为 MyComponent 的组件，并在其中使用组合式 API：

<template><div><h1>{{ message }}</h1><button @click="incrementCount">Increment</button><p>Count: {{ count }}</p></div>
</template><script>
import { ref, computed } from 'vue';export default {name: 'MyComponent',setup() {// 使用 ref 创建响应式数据const count = ref(0);const message = ref('Hello from MyComponent!');// 使用 computed 创建计算属性const doubleCount = computed(() => count.value * 2);// 方法定义function incrementCount() {count.value++;}// 返回需要在模板中使用的数据和方法return {count,message,doubleCount,incrementCount};}
};
</script><style scoped>
h1 {color: blue;
}
</style>

在这个组件中：

• setup 函数是 Vue 3 中引入的组合式 API 的入口点。它返回一个对象，该对象包含需要在模板中使用的响应式数据、计算属性和方法。
• 使用 ref 创建响应式数据 count 和 message。当这些值改变时，Vue 会自动更新使用这些值的模板部分。
• 使用 computed 创建计算属性 doubleCount，它会根据 count 的值动态计算并缓存结果。
• incrementCount 是一个方法，用于递增 count 的值。
• 在模板中，你可以像使用普通数据一样使用这些响应式数据和计算属性。

在 Vue 3 中，组件选项（如 data、computed、methods 等）不再是必需的，因为组合式 API 提供了一种更灵活的方式来组织和共享逻辑。不过，传统的选项 API 仍然受支持，并且可以与组合式 API 一起使用。

三、Vue3 官方组件

Vue 3 并没有直接提供“官方组件”这一概念，官方更多的是提供了构建组件所需的API和工具。但是，Vue 3 官方提供了几个核心库和插件，这些库和插件是构建Vue应用程序时常用的，并且与Vue 3紧密集成。

1. Vue Router

Vue Router 是Vue.js的官方路由器。它与Vue深度集成，用于构建单页应用。Vue Router允许你通过定义路由来管理应用的不同视图。

安装

npm install vue-router@4

实例代码

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = createRouter({history: createWebHistory(),routes, // short for `routes: routes`
})export default router

在你的Vue应用中使用路由：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)
app.mount('#app')

2. Vuex

虽然Vuex并不是专门为Vue 3设计的（它有一个与Vue 3兼容的版本），但Vuex仍然是Vue应用程序状态管理的流行选择。

安装

npm install vuex@next

实例代码

// store.js
import { createStore } from 'vuex'export default createStore({state: {count: 0},mutations: {increment(state) {state.count++}}
})

在你的Vue应用中使用Vuex：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)app.use(store)
app.mount('#app')

在组件中使用Vuex状态：

<template><div><p>{{ count }}</p><button @click="incrementCount">Increment</button></div>
</template><script>
import { computed } from 'vue'
import { useStore } from 'vuex'export default {setup() {const store = useStore()const count = computed(() => store.state.count)function incrementCount() {store.commit('increment')}return {count,incrementCount}}
}
</script>

Vue 3 的生态系统还包含了许多第三方库和组件，如UI库（如Vuetify、Element Plus、Quasar等）、工具库（如Vuex、Vue Router、axios等）和插件，这些都可以帮助开发者更高效地构建Vue应用程序。

四、Vue3 常用组件

Vue 3 本身并不直接提供“常用组件”，但生态系统中有很多流行的组件库，如 Vuetify、Element Plus、Ant Design Vue 等。这些库为开发者提供了丰富的 UI 组件，如按钮、输入框、表格、对话框等。

以下是一个使用 Vue 3 和 Element Plus（一个基于 Vue 3 的组件库）的简单实例代码。这个例子展示了如何使用 Element Plus 中的 el-button 和 el-input 组件。

首先，确保你已经安装了 Element Plus：

npm install element-plus --save

然后，在你的 Vue 3 项目中引入 Element Plus 和它的样式：

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

现在，你可以在任何 Vue 组件中使用 Element Plus 提供的组件了。以下是一个简单的组件实例，其中包含了一个按钮和一个输入框：

<template><div><el-input v-model="inputValue" placeholder="请输入内容"></el-input><el-button @click="handleButtonClick">点击我</el-button></div>
</template><script>
import { ref } from 'vue'export default {setup() {const inputValue = ref('')function handleButtonClick() {alert(`你输入的内容是: ${inputValue.value}`)}return {inputValue,handleButtonClick}}
}
</script>

在这个例子中，我们使用了 Vue 3 的组合式 API (setup 函数) 来定义组件的逻辑。我们创建了一个响应式的 inputValue 变量来绑定到 el-input 组件上，并且定义了一个 handleButtonClick 方法来处理按钮的点击事件。

请注意，不同的组件库可能有不同的安装和使用方式，因此请务必查阅相应组件库的文档以获取最准确的信息。

此外，Vue 3 还支持使用 <script setup> 语法糖，这是一种更简洁的方式来编写组件逻辑，特别是对于使用组合式 API 的场景。以下是一个使用 <script setup> 的相同组件示例：

<template><div><el-input v-model="inputValue" placeholder="请输入内容"></el-input><el-button @click="handleButtonClick">点击我</el-button></div>
</template><script setup>
import { ref } from 'vue'const inputValue = ref('')const handleButtonClick = () => {alert(`你输入的内容是: ${inputValue.value}`)
}
</script>

在这个 <script setup> 示例中，我们不需要显式地导出任何东西，因为所有在 <script setup> 中定义的变量和方法都会自动暴露给模板。

五、相关链接

1. Vue3官方地址
2. Vue3中文文档
3. 「Vue3系列」Vue3简介及安装
4. 「Vue3系列」Vue3起步/创建项目
5. 「Vue3系列」Vue3指令
6. 「Vue3系列」Vue3 模板语法
7. 「Vue3系列」Vue3 条件语句/循环语句