前端刺客系列----Vue 3 入门介绍

目次
一.什么是 Vue 3？
二.Vue 3 的重要特性
三,Vue3项目实战
四.总结

---

在前端开发的天下里，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 的重要特性

1. 组合式 API (Composition API)
组合式 API 是 Vue 3 中最为紧张的新增特性之一。它答应开发者通过函数的方式构造和复用逻辑，相比于 Vue 2 中的选项式 API (Options API)，组合式 API 提供了更强的机动性和可维护性。
为什么使用组合式 API？
更好的逻辑复用：组合式 API 答应将干系的逻辑封装到函数中，使得代码复用变得更加简洁。
更清楚的代码结构：你可以按照功能进行代码分离，而不再依赖于 Vue 2 中的 data、methods、computed 等选项，避免了大量冗长的逻辑。
TypeScript 更好的支持：组合式 API 更适合与 TypeScript 配合使用，因为它能更好地推导类型。
代码示例：使用组合式 API 创建一个计数器

1. // App.vue
2. <template>
3.   <div>
4.     <h1>{{ count }}</h1>
5.     <button @click="increment">Increment</button>
6.   </div>
7. </template>
9. <script setup>
10. // 引入 Composition API 中的 `ref` 函数
11. import { ref } from 'vue'
13. // 定义一个响应式变量 `count`
14. const count = ref(0)
16. // 定义一个方法来更新 `count`
17. const increment = () => {
18.   count.value++
19. }
20. </script>

复制代码

在这个例子中，我们使用了 ref 函数来创建一个响应式变量 count，并用 increment 方法来更新它。ref 会将基本类型（如数字、字符串等）包装成响应式对象，通过 .value 来访问和修改其值。
2. 更高效的假造 DOM 和性能提升
Vue 3 在性能方面做了大量的优化。最明显的改进之一是假造 DOM 的实现变得更加高效。假造 DOM 是 Vue 用来追踪 DOM 变动的技能，它答应 Vue 对 DOM 进行准确的更新，而不是每次都完全重渲染整个页面。Vue 3 在此基础上进行了优化，使得渲染速度更快，尤其是在大规模应用中。
3. TypeScript 支持
Vue 3 从一开始就为 TypeScript 提供了更全面的支持。在 Vue 2 中，TypeScript 的集成不是特殊好，而 Vue 3 则原生支持 TypeScript，提供了更好的类型推导和类型查抄。
代码示例：使用 TypeScript 和 Vue 3

1. // App.vue
2. <template>
3.   <div>
4.     <h1>{{ count }}</h1>
5.     <button @click="increment">Increment</button>
6.   </div>
7. </template>
9. <script lang="ts" setup>
10. import { ref } from 'vue'
12. const count = ref<number>(0)
14. const increment = () => {
15.   count.value++
16. }
17. </script>

复制代码

在这个示例中，我们通过 lang="ts" 声明白 Vue 文件使用 TypeScript，并为 count 使用了明确的类型定义 ref<number>(0)，这包管了变量 count 始终是数字类型。
4. Teleport
Vue 3 引入了一个新的内置组件 Teleport，它答应将一个组件的内容渲染到页面的任何位置，而不是默认的父组件中。这对于某些特殊场景，比如模态框、关照等非常有用。
代码示例：使用 Teleport 实现一个模态框

1. <template>
2.   <div>
3.     <button @click="showModal = true">Open Modal</button>
4.     <Teleport to="body">
5.       <div v-if="showModal" class="modal">
6.         <div class="modal-content">
7.           <p>This is a modal!</p>
8.           <button @click="showModal = false">Close</button>
9.         </div>
10.       </div>
11.     </Teleport>
12.   </div>
13. </template>
15. <script setup>
16. import { ref } from 'vue'
18. const showModal = ref(false)
19. </script>
21. <style>
22. .modal {
23.   position: fixed;
24.   top: 50%;
25.   left: 50%;
26.   transform: translate(-50%, -50%);
27.   background-color: white;
28.   padding: 20px;
29.   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
30. }
31. </style>

复制代码

在这个例子中，我们使用了 Teleport 将模态框内容渲染到 body 元素下，而不是当前组件的 DOM 中。
5. Suspense 和异步组件
Vue 3 引入了 Suspense 组件，它使得异步加载的组件能够在数据加载完毕之前提供一个“加载中”的状态。这对于需要异步加载的应用非常有用，提升了用户体验。
代码示例：使用 Suspense 加载异步组件

1. <template>
2.   <Suspense>
3.     <template #default>
4.       <AsyncComponent />
5.     </template>
6.     <template #fallback>
7.       <p>Loading...</p>
8.     </template>
9.   </Suspense>
10. </template>
12. <script setup>
13. import { defineAsyncComponent } from 'vue'
15. const AsyncComponent = defineAsyncComponent(() =>
16.   import('./AsyncComponent.vue')
17. )
18. </script>

复制代码

三,Vue3项目实战

项目结构

1. my-vue3-app/
2. ├── public/
3. │   └── index.html
4. ├── src/
5. │   ├── assets/
6. │   ├── components/
7. │   │   ├── TaskList.vue
8. │   │   ├── TaskItem.vue
9. │   │   └── AddTask.vue
10. │   ├── store/
11. │   │   └── taskStore.js
12. │   ├── views/
13. │   │   ├── Home.vue
14. │   │   └── NotFound.vue
15. │   ├── router/
16. │   │   └── index.js
17. │   ├── App.vue
18. │   ├── main.js
19. ├── package.json
20. └── vite.config.js

复制代码

1. src/main.js - 项目入口文件

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import router from './router'
4. import { createStore } from 'vuex'
6. const app = createApp(App)
8. app.use(router)
9. app.use(createStore({
10.   state: {
11.     tasks: []
12.   },
13.   mutations: {
14.     addTask(state, task) {
15.       state.tasks.push(task)
16.     },
17.     deleteTask(state, taskId) {
18.       state.tasks = state.tasks.filter(task => task.id !== taskId)
19.     },
20.     toggleTaskCompletion(state, taskId) {
21.       const task = state.tasks.find(t => t.id === taskId)
22.       if (task) {
23.         task.completed = !task.completed
24.       }
25.     },
26.     editTask(state, { taskId, updatedTask }) {
27.       const task = state.tasks.find(t => t.id === taskId)
28.       if (task) {
29.         Object.assign(task, updatedTask)
30.       }
31.     }
32.   },
33.   getters: {
34.     completedTasks: (state) => {
35.       return state.tasks.filter(task => task.completed)
36.     },
37.     pendingTasks: (state) => {
38.       return state.tasks.filter(task => !task.completed)
39.     }
40.   }
41. }))
43. app.mount('#app')

复制代码

2. src/router/index.js - 路由配置 

1. import { createRouter, createWebHistory } from 'vue-router'
2. import Home from '../views/Home.vue'
3. import NotFound from '../views/NotFound.vue'
5. const routes = [
6.   {
7.     path: '/',
8.     name: 'Home',
9.     component: Home
10.   },
11.   {
12.     path: '/:catchAll(.*)',
13.     name: 'NotFound',
14.     component: NotFound
15.   }
16. ]
18. const router = createRouter({
19.   history: createWebHistory(import.meta.env.BASE_URL),
20.   routes
21. })
23. export default router

复制代码

3. src/views/Home.vue - 主页视图

1. <template>
2.   <div class="home">
3.     <h1>Task Manager</h1>
4.     <AddTask />
5.     <h2>Pending Tasks</h2>
6.     <TaskList :tasks="pendingTasks" />
7.     <h2>Completed Tasks</h2>
8.     <TaskList :tasks="completedTasks" />
9.   </div>
10. </template>
12. <script setup>
13. import { computed } from 'vue'
14. import { useStore } from 'vuex'
15. import TaskList from '../components/TaskList.vue'
16. import AddTask from '../components/AddTask.vue'
18. const store = useStore()
20. const pendingTasks = computed(() => store.getters.pendingTasks)
21. const completedTasks = computed(() => store.getters.completedTasks)
22. </script>
24. <style scoped>
25. .home {
26.   padding: 20px;
27. }
28. h1 {
29.   color: #42b983;
30. }
31. </style>

复制代码

4. src/components/AddTask.vue - 添加任务组件

1. <template>
2.   <div class="add-task">
3.     <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
4.     <button @click="addTask">Add Task</button>
5.   </div>
6. </template>
8. <script setup>
9. import { ref } from 'vue'
10. import { useStore } from 'vuex'
12. const newTask = ref('')
13. const store = useStore()
15. const addTask = () => {
16.   if (newTask.value.trim()) {
17.     store.commit('addTask', {
18.       id: Date.now(),
19.       title: newTask.value,
20.       completed: false
21.     })
22.     newTask.value = ''
23.   }
24. }
25. </script>
27. <style scoped>
28. .add-task {
29.   margin-bottom: 20px;
30. }
31. input {
32.   padding: 8px;
33.   margin-right: 10px;
34.   width: 200px;
35. }
36. button {
37.   padding: 8px 12px;
38. }
39. </style>

复制代码

5. src/components/TaskList.vue - 任务列表组件

1. <template>
2.   <div>
3.     <ul>
4.       <TaskItem
5.         v-for="task in tasks"
6.         :key="task.id"
7.         :task="task"
8.       />
9.     </ul>
10.   </div>
11. </template>
13. <script setup>
14. import TaskItem from './TaskItem.vue'
15. import { defineProps } from 'vue'
17. const props = defineProps({
18.   tasks: Array
19. })
20. </script>
22. <style scoped>
23. ul {
24.   list-style: none;
25.   padding-left: 0;
26. }
27. </style>

复制代码

6. src/components/TaskItem.vue - 任务项组件

1. <template>
2.   <li :class="{ completed: task.completed }">
3.     <span @click="toggleCompletion">{{ task.title }}</span>
4.     <button @click="deleteTask">Delete</button>
5.     <button @click="editTask">Edit</button>
6.   </li>
7. </template>
9. <script setup>
10. import { defineProps } from 'vue'
11. import { useStore } from 'vuex'
13. const props = defineProps({
14.   task: Object
15. })
17. const store = useStore()
19. const toggleCompletion = () => {
20.   store.commit('toggleTaskCompletion', props.task.id)
21. }
23. const deleteTask = () => {
24.   store.commit('deleteTask', props.task.id)
25. }
27. const editTask = () => {
28.   const newTitle = prompt('Edit Task Title', props.task.title)
29.   if (newTitle && newTitle !== props.task.title) {
30.     store.commit('editTask', {
31.       taskId: props.task.id,
32.       updatedTask: { title: newTitle }
33.     })
34.   }
35. }
36. </script>
38. <style scoped>
39. .completed {
40.   text-decoration: line-through;
41. }
42. button {
43.   margin-left: 10px;
44.   padding: 5px 10px;
45.   cursor: pointer;
46. }
47. </style>

复制代码

7. src/views/NotFound.vue - 404 页面视图

1. <template>
2.   <div class="not-found">
3.     <h1>404 - Page Not Found</h1>
4.   </div>
5. </template>
7. <script setup>
8. </script>
10. <style scoped>
11. .not-found {
12.   text-align: center;
13.   padding: 50px;
14. }
15. </style>

复制代码

8. public/index.html - 项目 HTML 模板

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.   <title>Vue 3 Task Manager</title>
7. </head>
8. <body>
9.   <div id="app"></div>
10. </body>
11. </html>

复制代码

9. package.json - 项目依赖

1. {
2.   "name": "vue3-task-manager",
3.   "version": "1.0.0",
4.   "main": "src/main.js",
5.   "scripts": {
6.     "dev": "vite",
7.     "build": "vite build",
8.     "serve": "vite preview"
9.   },
10.   "dependencies": {
11.     "vue": "^3.2.0",
12.     "vue-router": "^4.0.0",
13.     "vuex": "^4.0.0"
14.   },
15.   "devDependencies": {
16.     "vite": "^4.0.0"
17.   }
18. }

复制代码

10. vite.config.js - Vite 配置

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
4. // https://vitejs.dev/config/
5. export default defineConfig({
6.   plugins: [vue()]
7. })

复制代码

四.总结

    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 应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。