深入解析Vue3：从入门到实战（详细版）
文章目录
前言
Vue.js 是一款用于构建用户界面的渐进式JavaScript框架。自Vue2推出以来，其简洁优雅的API设计、轻量级的特性以及出色的性能表现赢得了广大开发者的好评。随着前端技术的快速发展，Vue3应运而生，带来了众多令人兴奋的新特性和改进。本文旨在全面介绍Vue3的核心概念、新特性以及如何将其应用于实际项目中。
一、Vue3简介
Vue3是Vue.js框架的第三个主要版本，于2020年9月18日正式发布。相较于Vue2，Vue3在多个方面实现了显著的提升。
官网地址
主要特点
- 性能优化：Vue3利用现代JavaScript特性（如Proxy），在保持现有API的同时，提升了应用的运行效率。
- 体积减小：通过更精细的模块化设计和Tree Shaking支持，Vue3的初始加载时间更快，最终包体积更小。
- TypeScript支持：Vue3原生支持TypeScript，使得类型安全性和开发体验得到了极大的提升。
- Composition API：Vue3引入了一种全新的API设计模式——Composition API，它允许开发者更灵活地组织和复用逻辑代码。
- 更好的测试支持：Vue3提供了一系列工具和库，使得单元测试和端到端测试更加便捷。
二、安装与创建Vue3项目
使用Vue CLI创建项目
Vue CLI 是Vue.js的官方脚手架工具，可以帮助开发者快速搭建项目。要创建一个Vue3项目，首先需要确保已安装最新版本的Vue CLI。可以通过以下命令检查或安装：
# 检查Vue CLI版本
vue --version
# 如果版本低于4.5.0，请更新
npm install -g @vue/cli
然后，使用Vue CLI创建一个新的Vue3项目：
vue create my-vue3-project
在创建过程中，选择Vue 3预设或者手动选择特性，确保选择了Vue 3版本。
使用Vite创建项目
Vite 是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具，它利用浏览器原生的ES模块导入功能，实现了快速启动和按需编译，非常适合Vue3项目。创建一个基于Vite的Vue3项目，只需几行命令：
npm init vite@latest my-vue3-project --template vue
cd my-vue3-project
npm install
npm run dev
三、Composition API详解
Setup函数
Composition API的核心是setup函数，它替代了Vue2中的data、methods、computed等选项。setup函数在组件实例初始化之前调用，可以接收组件的props和context作为参数，并且必须返回一个对象，该对象中的属性和方法可以在模板中直接使用。
export default {
props: {
message: String
},
setup(props, context) {
// 组件逻辑...
return {
// 需要在模板中使用的属性和方法
}
}
}
ref与Reactive
Vue3中提供了两种方式来创建响应式数据：ref和reactive。
- ref：用于创建一个响应式的引用对象，可以用来包裹任何类型的值。在模板中使用时，不需要.value后缀。
- reactive：用于创建一个深层响应式的对象。对于对象类型的数据，推荐使用reactive。
import { ref, reactive } from 'vue'
// 使用ref
let count = ref(0)
// 使用reactive
let state = reactive({
name: 'Vue',
count: 0
})
// 在setup函数中使用
export default {
setup() {
let count = ref(0)
let state = reactive({
name: 'Vue',
count: 0
})
function increment() {
count.value++
state.count++
}
return {
count,
state,
increment
}
}
}
生命周期钩子
Vue3中的生命周期钩子名称有所变化，但它们的功能和使用方式与Vue2相似。Vue3提供了新的生命周期钩子函数，如onMounted、onUnmounted等。
import { onMounted, onUnmounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('组件已挂载')
})
onUnmounted(() => {
console.log('组件已卸载')
})
// ...
}
}
计算属性和监听器
Vue3中计算属性和监听器也有了新的API。
- 计算属性：使用computed函数创建。
- 监听器：使用watch函数创建。
import { ref, computed, watch } from 'vue'
export default {
setup() {
let count = ref(0)
// 计算属性
let doubleCount = computed(() => count.value * 2)
// 监听器
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
return {
count,
doubleCount
}
}
}
四、新特性与优化
响应式系统
Vue3的响应式系统基于ES6的Proxy对象，相比Vue2的Object.defineProperty方法，它能够更高效地处理对象属性的添加和删除操作，同时避免了数组索引更改不触发更新的问题。
更好的TypeScript支持
Vue3提供了更好的TypeScript支持，包括类型推断和类型检查，这使得使用TypeScript开发Vue应用变得更加容易。
类型定义
Vue3提供了详细的类型定义文件，可以通过安装@vue/runtime-dom来获取这些类型定义。
npm install @vue/runtime-dom
类型推断
Vue3中的ref和reactive函数会自动推断类型。
import { ref, reactive } from 'vue'
let count = ref(0) // count的类型为Ref<number>
let state = reactive({ name: 'Vue' }) // state的类型为{ name: string }
新组件
Vue3引入了几个新的内置组件，如<Fragment>、<Teleport>和<Suspense>，它们分别解决了多根节点、DOM结构优化和异步组件加载的问题。
<Fragment>：允许在一个组件中返回多个根节点。<template> <Fragment> <h1>Title</h1> <p>Content</p> </Fragment> </template><Teleport>：允许将模态框或其他组件的内容渲染到DOM树的任意位置。<template> <button @click="openModal">Open Modal</button> <Teleport to="body"> <div v-if="isModalOpen" class="modal"> <p>This is a modal</p> <button @click="closeModal">Close</button> </div> </Teleport> </template> <script> import { ref } from 'vue' export default { setup() { let isModalOpen = ref(false) function openModal() { isModalOpen.value = true } function closeModal() { isModalOpen.value = false } return { isModalOpen, openModal, closeModal } } } </script><Suspense>：用于处理异步依赖，等待所有异步操作完成后再渲染组件。<template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </template> <script> import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue')) export default { components: { AsyncComponent } } </script>
全局API重构
Vue3对全局API进行了重构，将许多全局方法和属性移动到了app.config.globalProperties中，减少了全局污染，提高了模块化的程度。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.$myGlobalMethod = () => {
console.log('This is a global method')
}
// 添加全局指令
app.directive('focus', {
mounted(el) {
el.focus()
}
})
app.mount('#app')
更好的测试支持
Vue3提供了一系列工具和库，使得单元测试和端到端测试更加便捷。
- 单元测试：使用Vue Test Utils进行单元测试。
npm install @vue/test-utils @vue/vue3-jest jestimport { mount } from '@vue/test-utils' import MyComponent from '@/components/MyComponent.vue' describe('MyComponent.vue', () => { it('renders correctly', () => { const wrapper = mount(MyComponent, { props: { message: 'Hello, Vue3!' } }) expect(wrapper.text()).toContain('Hello, Vue3!') }) }) - 端到端测试：使用Cypress进行端到端测试。
npm install cypressdescribe('My App', () => { it('displays the correct title', () => { cy.visit('/') cy.get('h1').should('contain', 'Welcome to Vue3') }) })
五、实战案例
示例项目：Todo List
我们将通过一个简单的Todo List应用来展示Vue3的一些核心特性和新特性。
项目结构
my-todo-app/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ └── TodoList.vue
│ ├── App.vue
│ └── main.js
├── package.json
└── vite.config.js
安装依赖
npm install vue
创建主应用文件
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
创建App组件
src/App.vue
<template>
<div id="app">
<h1>Todo List</h1>
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue'
export default {
components: {
TodoList
}
}
</script>
创建TodoList组件
src/components/TodoList.vue
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let newTodo = ref('')
let todos = ref([])
function addTodo() {
if (newTodo.value.trim()) {
todos.value.push(newTodo.value)
newTodo.value = ''
}
}
function removeTodo(index) {
todos.value.splice(index, 1)
}
return {
newTodo,
todos,
addTodo,
removeTodo
}
}
}
</script>
结语
Vue3不仅继承了Vue2的优点，而且通过引入Composition API、优化响应式系统、增强TypeScript支持等一系列创新，为开发者提供了更加灵活、高效的开发体验。无论是对于新手还是经验丰富的开发者，Vue3都值得尝试和深入学习。希望本文能够帮助你更好地理解和掌握Vue3的核心概念和技术要点，开启你的Vue3之旅。
原文地址：https://blog.csdn.net/chaosweet/article/details/143591981
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！