概述
Vue3 作为 Google 开源的前端框架，通过引入 Composition API, 细化响应式系统和优化组件机制，显著提升了性能和开发效率。其设计理念侧重于简洁性、模块化和高性能，旨在为开发者提供更强大的工具来构建复杂的用户界面。
Vue3 引入 TypeScript 支持，通过 TypeScript 提高类型安全性和代码可读性。其双向数据绑定的优化，如计算属性和响应式系统，使得数据更新更高效且同步。Composition API 是 Vue3 主要的编程模式，它使用基于函数的组件来组合代码，而不是依赖于继承和组件，这极大地简化了组件的逻辑结构和代码的可维护性。细化响应式机制，通过 ref 和 reactive API，开发者能更精准地控制响应式行为，从而提升性能。
快速安装 Vue3
安装 Vue CLI
Vue CLI 是 Vue.js 的官方命令行工具，用于创建新项目、运行开发服务器、构建生产版本等。
首先，确保已安装 Node.js。然后使用 npm 或 yarn 来全局安装 Vue CLI：
# 使用 npm
npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli创建新项目
使用 Vue CLI 创建项目，选择 Vue 3 作为模板：
vue create my-vue3-project在命令提示符下输入 y 来接受默认项目的配置，或者根据需要自定义项目目录结构、应用名称、模板等。
项目创建成功后，切换到项目目录并运行开发服务器：
cd my-vue3-project
npm run serve或使用 yarn 运行开发服务器：
yarn dev开发服务器将在本地启动，并显示项目的地址。访问此地址以查看和调试应用程序。
Vue3 基本语法
组件系统与响应式数据
Vue3 的单文件组件（SFC）文件包含 HTML、CSS 和 JavaScript 代码。组件通过模板语法和 JavaScript 代码逻辑进行定义。
组件示例：
<!-- MyComponent.vue -->
<template>
<div>
<h1>{{ message }}</h1>
<p>动态更新: {{ message }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello Vue3!'
}
}
}
</script>组件可以通过 props 接收数据，并通过 emit 事件发送自定义事件。例如：
<!-- 父组件 -->
<template>
<MyComponent msg="Welcome to Vue3!" />
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>数据绑定：
模板中使用双大括号（{{ }}）来绑定数据：
<!-- 在其他组件中使用 MyComponent -->
<MyComponent message="动态更新" />响应式原理与组件传参与通信
动态组件：
动态组件允许根据条件更换组件实例。这可以通过 v-if, v-else 和 v-for 指令实现：
<!-- 使用 v-if 条件渲染 -->
<template>
<div>
<button @click="showComponent = !showComponent">Toggle Component</button>
<component :is="Component"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
showComponent: true,
Component: ComponentA
}
},
methods: {
switchComponent() {
this.Component = this.Component === ComponentA ? ComponentB : ComponentA;
}
}
}
</script>组件传参与通信：
<!-- 父组件 -->
<template>
<MyComponent msg="Passed message" />
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>MyComponent.vue：
<!-- MyComponent.vue -->
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>实用工具与插件
Vuex
Vuex 是一个用于状态管理的库，对于需要处理复杂的 UI 状态和应用范围的状态共享的项目非常有用。
基本示例：
// 创建 store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment');
}
},
getters: {
doubleCount: state => state.count * 2
}
});
// 在组件中使用 store
<template>
<div>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: mapState(['count']),
methods: mapMutations(['increment'])
}
</script>Vue Router
Vue Router 是用于单页应用路由管理的工具，它允许导航到不同组件和状态之间的转换。
基本示例：
// 导入 Vue Router
import VueRouter from 'vue-router';
// 定义组件
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
// 设置路由
const routes = [
{
path: '/a',
component: ComponentA
},
{
path: '/b',
component: ComponentB
}
];
const router = new VueRouter({
routes
});
// 在 Vue 实例中使用路由
new Vue({
router,
render: h => h(App)
}).$mount('#app');练习与实战：一个简单的 Todo 应用
实战案例：Todo 应用
构建一个简单的 Todo 应用，实现创建、编辑和删除任务的功能。首先，创建包含任务列表、添加、编辑和删除功能的单文件组件 Todo.vue：
<!-- Todo.vue -->
<template>
<div>
<h2>{{ title }}</h2>
<div v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.done">
<span :class="{ 'text-strike': task.done }">{{ task.text }}</span>
<button @click="editTask(task)">编辑</button>
<button @click="removeTask(task)">删除</button>
</div>
<input type="text" v-model="newTask">
<button @click="addTask">添加任务</button>
</div>
</template>
<script>
export default {
name: 'Todo',
data() {
return {
title: 'Todo List',
tasks: [],
newTask: ''
}
},
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push({ id: Date.now(), text: this.newTask, done: false });
this.newTask = '';
}
},
removeTask(task) {
this.tasks = this.tasks.filter(t => t !== task);
},
editTask(task) {
task.text = prompt('请输入新的任务描述');
task.done = false;
}
}
}
</script>
<style>
.text-strike {
text-decoration: line-through;
}
</style>实战案例：Todo 应用组件化
将 Todo.vue 分解为多个组件，包括任务列表组件、任务编辑组件和任务详情组件，可以进一步提升代码的可读性和维护性：
<!-- TaskItem.vue -->
<template>
<div>
<input type="checkbox" v-model="task.done">
<span :class="{ 'text-strike': task.done }">{{ task.text }}</span>
<button @click="editTask(task)">编辑</button>
<button @click="removeTask(task)">删除</button>
</div>
</template>
<script>
export default {
props: ['task'],
methods: {
editTask(task) {
const newText = prompt('请输入新的任务描述');
task.text = newText;
task.done = false;
},
removeTask(task) {
// 处理删除逻辑
}
}
}
</script>
<style>
.text-strike {
text-decoration: line-through;
}
</style>通过上述步骤，你可以从零开始构建一个完整的 Todo 应用，实现基本的 CRUD 操作，以及进一步考虑组件化和状态管理的实践。这不仅帮助你熟悉 Vue3 的基本语法和组件化开发，同时也加深了对响应式系统和状态管理的理解。
通过逐步构建和扩展这个应用，你可以更深入地理解和应用 Vue3 的功能。实际开发中，你还需要学习如何利用第三方库、插件和工具来优化性能和提升用户体验。