一、Vue3 组件
Vue3 是 Vue.js 的最新版本，它引入了许多新的特性和改进。在 Vue3 中，组件是构建应用程序的核心部分，它们可以重用、组合和嵌套。Vue3 中的一些常用组件包括：
- Fragment：在 Vue2 中，每个组件必须有一个根标签，但在 Vue3 中，组件可以没有根标签，其内部会将多个标签包含在一个 Fragment 虚拟元素中。这有助于减少标签层级，使代码更简洁。
- Teleport（传送门）：这是一个可以将组件的 HTML 结构移动到指定位置的功能。使用
<teleport>标签可以实现这一功能，它可以将子组件渲染到 DOM 中任何位置，而不仅仅是其父组件内部。 - 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紧密集成。
- 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')
- 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> 中定义的变量和方法都会自动暴露给模板。
