在当今的前端开发领域，Vue.js 是一个备受推崇的 JavaScript 框架，它以其简洁的语法和高效的组件系统赢得了众多开发者的喜爱。Vue3 作为 Vue.js 的最新版本，带来了许多改进和新特性。本文将带你从入门到精通，通过 10 个经典案例，让你轻松掌握 Vue3 的实战技巧。
一、Vue3 简介
Vue3 是 Vue.js 的第三个主要版本，它带来了许多改进，包括性能提升、更好的类型支持、Composition API 等。下面是 Vue3 的一些关键特性：
- 性能优化：Vue3 通过 Tree Shaking 和 Proxies 等技术实现了更好的性能。
- Composition API：提供了一种新的声明式 API，用于组织代码和重用逻辑。
- TypeScript 支持：Vue3 官方支持 TypeScript，为大型项目提供了更好的类型安全。
- 响应式系统升级：基于 Proxy 的响应式系统更加高效和灵活。
二、案例一：创建一个简单的 Todo List
1. 准备工作
首先，你需要安装 Vue3 和 Vite，这是一个现代的构建工具。
npm install vue@next vite -D
npx vite create todo-list
cd todo-list
npm run dev
2. 实现步骤
- 创建一个
App.vue文件。 - 使用
reactive函数创建响应式数据。 - 使用
v-model实现表单输入的双向绑定。 - 使用
v-for循环渲染列表项。
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
newTodo: '',
todos: []
});
const addTodo = () => {
if (state.newTodo.trim()) {
state.todos.push(state.newTodo);
state.newTodo = '';
}
};
const removeTodo = (index) => {
state.todos.splice(index, 1);
};
return {
...toRefs(state),
addTodo,
removeTodo
};
}
};
</script>
三、案例二：使用 Vue3 的 Composition API
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用 Composition API。
2. 实现步骤
- 使用
setup函数定义组件的逻辑。 - 使用
ref和reactive创建响应式数据。 - 使用
computed和watch进行计算和监听。
<template>
<div>
<input v-model="state.search" />
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const state = ref({
search: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
});
const filteredList = computed(() => {
return state.value.items.filter(item =>
item.name.toLowerCase().includes(state.value.search.toLowerCase())
);
});
return {
state,
filteredList
};
}
};
</script>
四、案例三：使用 Vue3 的异步组件
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用异步组件。
2. 实现步骤
- 使用
defineAsyncComponent定义异步组件。 - 使用
Suspense和defineAsyncComponent包裹异步组件。
<template>
<div>
<suspense>
<template #default>
<async-component></async-component>
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
};
</script>
五、案例四：使用 Vue3 的指令
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用自定义指令。
2. 实现步骤
- 使用
directives选项定义自定义指令。 - 在模板中使用指令。
<template>
<div v-custom="value">
<input v-model="value" />
</div>
</template>
<script>
export default {
directives: {
custom: {
beforeMount(el, binding) {
el.style.color = binding.value ? 'red' : 'blue';
}
}
}
};
</script>
六、案例五：使用 Vue3 的插槽
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用插槽。
2. 实现步骤
- 创建一个组件，并使用
slot标签定义插槽。 - 在父组件中使用
v-slot指令插入内容。
<!-- ChildComponent.vue -->
<template>
<div>
<slot>默认内容</slot>
</div>
</template>
<!-- App.vue -->
<template>
<child-component>
<h1>这是插入的内容</h1>
</child-component>
</template>
七、案例六：使用 Vue3 的过渡效果
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用过渡效果。
2. 实现步骤
- 使用
<transition>标签包裹需要添加过渡效果的元素。 - 使用
name属性定义过渡效果的名称。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<div v-if="show">Hello, Vue3!</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
}
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
八、案例七：使用 Vue3 的插件
1. 准备工作
创建一个新的 Vue3 项目，并在 App.vue 中使用插件。
2. 实现步骤
- 定义一个插件对象。
- 在
main.js中使用app.use方法安装插件。
// my-plugin.js
export default {
install(app) {
app.config.globalProperties.$myGlobalMethod = () => {
console.log('Hello from my plugin!');
};
}
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './my-plugin';
const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');
九、案例八：使用 Vue3 的路由
1. 准备工作
创建一个新的 Vue3 项目，并使用 Vue Router。
2. 实现步骤
- 安装 Vue Router。
- 配置路由。
- 使用
<router-link>和<router-view>渲染链接和视图。
// router/index.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
});
export default router;
<!-- App.vue -->
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
十、案例九：使用 Vue3 的状态管理
1. 准备工作
创建一个新的 Vue3 项目，并使用 Vuex。
2. 实现步骤
- 安装 Vuex。
- 创建一个 Vuex store。
- 在组件中使用
mapState或mapGetters等辅助函数。
// store/index.js
import { createStore } from 'vuex';
const store = createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment');
}
}
});
export default store;
<!-- App.vue -->
<template>
<div>
<button @click="increment">Increment</button>
<p>{{ count }}</p>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['increment'])
}
};
</script>
十一、案例十：使用 Vue3 的测试
1. 准备工作
创建一个新的 Vue3 项目，并使用 Jest 进行测试。
2. 实现步骤
- 安装 Jest 和 Vue Test Utils。
- 编写测试用例。
// src/App.spec.js
import { mount } from '@vue/test-utils';
import App from '../App.vue';
describe('App.vue', () => {
it('renders correctly', () => {
const wrapper = mount(App);
expect(wrapper.text()).toContain('Hello, Vue3!');
});
});
通过以上 10 个经典案例，你将能够从入门到精通 Vue3。这些案例涵盖了 Vue3 的核心特性和常用功能，相信对你学习和使用 Vue3 将大有裨益。祝你在 Vue3 的道路上越走越远！