目录
[一.什么是 Vue 3?](#一.什么是 Vue 3?)
[二.Vue 3 的主要特性](#二.Vue 3 的主要特性)
在前端开发的世界里,Vue.js 作为一款渐进式的 JavaScript 框架,已成为许多开发者的首选工具。自从 Vue 3 发布以来,它带来了许多重要的改进和新特性,不仅提升了性能,还使得开发体验更加流畅。在这篇文章中,我们将详细介绍 Vue 3 的核心概念,并通过一些简单的代码示例,帮助大家快速上手 Vue 3。
一.什么是 Vue 3?
Vue.js 是一款渐进式的 JavaScript 框架,用于构建用户界面。它的设计理念非常灵活,可以逐步引入到项目中,适应不同规模的需求。Vue 3 是 Vue.js 框架的最新版本,它在 Vue 2 的基础上进行了全面的优化,带来了以下几大亮点:
性能提升:Vue 3 引入了更高效的虚拟 DOM 和组件渲染机制,使得整体性能得到了显著提升。
组合式 API (Composition API):这是一种全新的编写组件的方式,使得逻辑复用和代码组织变得更加灵活和清晰。
TypeScript 支持:Vue 3 在设计时就考虑到了 TypeScript,增强了对类型系统的支持。
更小的包体积:Vue 3 的核心库相比 Vue 2 更加精简,加载速度更快。
多个其他新特性:如 Teleport、Suspense、Fragment 等。
在这篇文章中,我们会深入探索 Vue 3 的主要新特性,并通过示例帮助大家更好地理解它。
二.Vue 3 的主要特性
- 组合式 API (Composition API)
组合式 API 是 Vue 3 中最为重要的新增特性之一。它允许开发者通过函数的方式组织和复用逻辑,相比于 Vue 2 中的选项式 API (Options API),组合式 API 提供了更强的灵活性和可维护性。
为什么使用组合式 API?
更好的逻辑复用:组合式 API 允许将相关的逻辑封装到函数中,使得代码复用变得更加简洁。
更清晰的代码结构:你可以按照功能进行代码分离,而不再依赖于 Vue 2 中的 data、methods、computed 等选项,避免了大量冗长的逻辑。
TypeScript 更好的支持:组合式 API 更适合与 TypeScript 配合使用,因为它能更好地推导类型。
代码示例:使用组合式 API 创建一个计数器
// App.vue
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
// 引入 Composition API 中的 `ref` 函数
import { ref } from 'vue'
// 定义一个响应式变量 `count`
const count = ref(0)
// 定义一个方法来更新 `count`
const increment = () => {
count.value++
}
</script>
在这个例子中,我们使用了 ref 函数来创建一个响应式变量 count,并用 increment 方法来更新它。ref 会将基本类型(如数字、字符串等)包装成响应式对象,通过 .value 来访问和修改其值。
- 更高效的虚拟 DOM 和性能提升
Vue 3 在性能方面做了大量的优化。最显著的改进之一是虚拟 DOM 的实现变得更加高效。虚拟 DOM 是 Vue 用来追踪 DOM 变更的技术,它允许 Vue 对 DOM 进行精确的更新,而不是每次都完全重渲染整个页面。Vue 3 在此基础上进行了优化,使得渲染速度更快,尤其是在大规模应用中。
- TypeScript 支持
Vue 3 从一开始就为 TypeScript 提供了更全面的支持。在 Vue 2 中,TypeScript 的集成不是特别好,而 Vue 3 则原生支持 TypeScript,提供了更好的类型推导和类型检查。
代码示例:使用 TypeScript 和 Vue 3
// App.vue
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref<number>(0)
const increment = () => {
count.value++
}
</script>
在这个示例中,我们通过 lang="ts" 声明了 Vue 文件使用 TypeScript,并为 count 使用了明确的类型定义 ref<number>(0),这保证了变量 count 始终是数字类型。
- Teleport
Vue 3 引入了一个新的内置组件 Teleport,它允许将一个组件的内容渲染到页面的任何位置,而不是默认的父组件中。这对于某些特殊场景,比如模态框、通知等非常有用。
代码示例:使用 Teleport 实现一个模态框
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<Teleport to="body">
<div v-if="showModal" class="modal">
<div class="modal-content">
<p>This is a modal!</p>
<button @click="showModal = false">Close</button>
</div>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
在这个例子中,我们使用了 Teleport 将模态框内容渲染到 body 元素下,而不是当前组件的 DOM 中。
- Suspense 和异步组件
Vue 3 引入了 Suspense 组件,它使得异步加载的组件能够在数据加载完毕之前提供一个"加载中"的状态。这对于需要异步加载的应用非常有用,提升了用户体验。
代码示例:使用 Suspense 加载异步组件
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<p>Loading...</p>
</template>
</Suspense>
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
)
</script>
三,Vue3项目实战
项目结构
my-vue3-app/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── TaskList.vue
│ │ ├── TaskItem.vue
│ │ └── AddTask.vue
│ ├── store/
│ │ └── taskStore.js
│ ├── views/
│ │ ├── Home.vue
│ │ └── NotFound.vue
│ ├── router/
│ │ └── index.js
│ ├── App.vue
│ ├── main.js
├── package.json
└── vite.config.js
-
src/main.js - 项目入口文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from 'vuex'const app = createApp(App)
app.use(router)
app.use(createStore({
state: {
tasks: []
},
mutations: {
addTask(state, task) {
state.tasks.push(task)
},
deleteTask(state, taskId) {
state.tasks = state.tasks.filter(task => task.id !== taskId)
},
toggleTaskCompletion(state, taskId) {
const task = state.tasks.find(t => t.id === taskId)
if (task) {
task.completed = !task.completed
}
},
editTask(state, { taskId, updatedTask }) {
const task = state.tasks.find(t => t.id === taskId)
if (task) {
Object.assign(task, updatedTask)
}
}
},
getters: {
completedTasks: (state) => {
return state.tasks.filter(task => task.completed)
},
pendingTasks: (state) => {
return state.tasks.filter(task => !task.completed)
}
}
}))app.mount('#app')
-
src/router/index.js - 路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import NotFound from '../views/NotFound.vue'const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/:catchAll(.*)',
name: 'NotFound',
component: NotFound
}
]const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})export default router
-
src/views/Home.vue - 主页视图
<template>Task Manager
<AddTask />Pending Tasks
<TaskList :tasks="pendingTasks" />Completed Tasks
<TaskList :tasks="completedTasks" />const store = useStore()
const pendingTasks = computed(() => store.getters.pendingTasks)
<style scoped> .home { padding: 20px; } h1 { color: #42b983; } </style>
const completedTasks = computed(() => store.getters.completedTasks)
</script> -
src/components/AddTask.vue - 添加任务组件
<template><button @click="addTask">Add Task</button></template> <script setup> import { ref } from 'vue' import { useStore } from 'vuex'const newTask = ref('')
const store = useStore()const addTask = () => {
<style scoped> .add-task { margin-bottom: 20px; } input { padding: 8px; margin-right: 10px; width: 200px; } button { padding: 8px 12px; } </style>
if (newTask.value.trim()) {
store.commit('addTask', {
id: Date.now(),
title: newTask.value,
completed: false
})
newTask.value = ''
}
}
</script> -
src/components/TaskList.vue - 任务列表组件
<template>-
<TaskItem
v-for="task in tasks"
:key="task.id"
:task="task"
/>
const props = defineProps({
<style scoped> ul { list-style: none; padding-left: 0; } </style>
tasks: Array
})
</script> -
src/components/TaskItem.vue - 任务项组件
<template> - {{ task.title }} <button @click="deleteTask">Delete</button> <button @click="editTask">Edit</button> </template> <script setup> import { defineProps } from 'vue' import { useStore } from 'vuex'
-
src/views/NotFound.vue - 404 页面视图
<template>404 - Page Not Found
-
public/index.html - 项目 HTML 模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 3 Task Manager</title> </head> <body> </body> </html> -
package.json - 项目依赖
{
"name": "vue3-task-manager",
"version": "1.0.0",
"main": "src/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.0",
"vue-router": "^4.0.0",
"vuex": "^4.0.0"
},
"devDependencies": {
"vite": "^4.0.0"
}
} -
vite.config.js - Vite 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
const props = defineProps({
task: Object
})
const store = useStore()
const toggleCompletion = () => {
store.commit('toggleTaskCompletion', props.task.id)
}
const deleteTask = () => {
store.commit('deleteTask', props.task.id)
}
const editTask = () => {
const newTitle = prompt('Edit Task Title', props.task.title)
if (newTitle && newTitle !== props.task.title) {
store.commit('editTask', {
taskId: props.task.id,
updatedTask: { title: newTitle }
})
}
}
</script>
四.总结
Vue 3 是 Vue.js 框架的最新版本,它带来了多个令人期待的改进和特性,旨在提升开发者体验和性能。最显著的变化是引入了 组合式 API,通过 setup() 函数和 ref、reactive 等新的响应式机制,开发者可以更灵活地组织组件逻辑,避免了 Vue 2 中的复杂选项式 API,提升了代码的可维护性和逻辑复用性。此外,Vue 3 进一步优化了性能,框架的体积比 Vue 2 小了约 30%,并且虚拟 DOM 的更新算法也得到了改进,使得更新速度更快,启动时间也大大缩短。同时,Vue 3 完美支持 TypeScript,增强了类型推导和类型检查,使得大型项目的开发更加安全和高效。Vue 3 还支持 Fragment,允许组件返回多个根节点,从而避免了不必要的 DOM 包裹元素。新加入的 Teleport 组件使得将内容渲染到页面的任意位置变得简单,例如模态框、弹窗等 UI 组件的处理更加灵活。而 Suspense 则提供了对异步组件的优雅处理,允许开发者在组件加载时显示占位符内容,改善用户体验。此外,Vue 3 与 Vite 集成紧密,Vite 作为构建工具提供了极快的热更新和构建速度,极大提升了开发效率。对于 Vue 2 的开发者,Vue 3 提供了良好的向后兼容性,使得迁移过程更加平滑,且框架支持通过 @vue/compat 模式逐步过渡。总体而言,Vue 3 是一个强大、灵活且高效的框架,既适合小型项目,也能够满足大型应用的开发需求,帮助开发者构建更现代化、响应式和可扩展的 Web 应用。