前端必看！每日10个超实用Vue3实战技巧，助你成为开发大神
嘿，前端小伙伴们！在当下激烈的前端开发竞争中，掌握Vue3可是“卷王”必备技能。今天咱就唠点实在的，一口气分享10个超实用的Vue3实战技巧，手把手教你把项目玩得6到飞起！每个技巧都配了详细代码和注释，包你一看就懂，看完直接上手！话不多说，开冲！
一、响应式数据的花式玩法
在Vue3中，响应式数据是核心中的核心，热搜词“Vue3响应式原理”热度一直居高不下。咱们先从最基础的ref和reactive说起。
1. ref和reactive的使用场景
ref和reactive都是用来创建响应式数据的，但它们各有千秋。
// 引入Vue3的ref函数，它可以将基本数据类型（如字符串、数字、布尔等）变成响应式数据
import { ref } from 'vue';
// 创建一个响应式的字符串
const message = ref('Hello, Vue3!');
// 在模板中可以直接使用message.value来访问和修改数据
// 引入Vue3的reactive函数，它主要用于将对象或数组变成响应式数据
import { reactive } from 'vue';
// 创建一个响应式的对象
const user = reactive({
name: '小明',
age: 25
});
// 在模板中可以直接使用user.name和user.age来访问数据
一般来说，如果你要处理单个基本数据类型，用ref；如果是复杂的对象或数组结构，reactive更合适。但注意，reactive对嵌套对象的响应式处理有点小坑，后续咱们会讲到。
2. 深度响应式与shallowRef、shallowReactive
有时候，我们不需要对整个数据结构进行深度响应式处理，这时候shallowRef和shallowReactive就派上用场了。
// 引入shallowRef函数
import { shallowRef } from 'vue';
// 创建一个浅响应式的对象，只有对ref本身的赋值会触发更新，对象内部属性变化不会触发
const shallowObj = shallowRef({
data: '初始数据'
});
// 修改内部属性，不会触发视图更新
shallowObj.value.data = '新数据';
// 重新赋值ref，会触发视图更新
shallowObj.value = {
data: '真正更新的数据'
};
// 引入shallowReactive函数
import { shallowReactive } from 'vue';
// 创建一个浅响应式的对象，只有对象第一层属性变化会触发更新，嵌套属性变化不会触发
const shallowUser = shallowReactive({
name: '小红',
address: {
city: '北京'
}
});
// 修改第一层属性，会触发视图更新
shallowUser.name = '小蓝';
// 修改嵌套属性，不会触发视图更新
shallowUser.address.city = '上海';
了解这些，能帮我们在性能优化上省下不少功夫，毕竟不必要的响应式处理会增加开销。
二、组件通信的那些事儿
组件通信是Vue项目开发中绕不开的话题，“Vue3组件通信”也是前端开发者常搜的关键词。
1. 父子组件通信
父子组件通信是最常见的场景。父组件向子组件传值用props，子组件向父组件传值用emit。
<!-- 父组件模板 -->
<template>
<div>
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent"></ChildComponent>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
// 定义一个响应式数据，作为父组件传递给子组件的值
const parentMessage = ref('来自父组件的数据');
// 定义一个方法，用于接收子组件传递过来的事件
const handleChildEvent = (data) => {
console.log('接收到子组件传来的数据:', data);
};
return {
parentMessage,
handleChildEvent
};
}
};
</script>
<!-- 子组件模板 -->
<template>
<div>
<p>{{ message }}</p>
<button @click="sendDataToParent">向父组件传值</button>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
// 定义props，接收父组件传递过来的数据
props: {
message: {
type: String,
required: true
}
},
setup(props, { emit }) {
// 定义一个方法，用于向父组件发送事件并传递数据
const sendDataToParent = () => {
emit('childEvent', '来自子组件的数据');
};
return {
sendDataToParent
};
}
});
</script>
2. 兄弟组件通信
兄弟组件通信一般借助一个公共的父组件来实现，或者使用mitt、eventBus等第三方库。这里我们用mitt来演示。
首先安装mitt：
npm install mitt
// 创建一个mitt实例，作为事件总线
import mitt from'mitt';
const emitter = mitt();
// 兄弟组件A，发送事件
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 发送一个名为'someEvent'的事件，并传递数据
emitter.emit('someEvent', '这是来自组件A的数据');
});
return {};
}
};
// 兄弟组件B，接收事件
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 监听'someEvent'事件，并处理接收到的数据
const handler = (data) => {
console.log('接收到组件A的数据:', data);
};
emitter.on('someEvent', handler);
// 在组件卸载时，记得移除事件监听，避免内存泄漏
return () => {
emitter.off('someEvent', handler);
};
});
return {};
}
};
三、生命周期钩子函数的升级玩法
Vue3的生命周期钩子函数和Vue2有些不同，“Vue3生命周期”也是前端开发者关注的重点。
import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
// 组件挂载完成后调用
onMounted(() => {
console.log('组件已挂载');
});
// 组件更新后调用
onUpdated(() => {
console.log('组件已更新');
});
// 组件卸载前调用
onUnmounted(() => {
console.log('组件即将卸载');
});
return {};
}
};
在Vue3中，setup函数内使用这些钩子函数，比Vue2的选项式写法更灵活，也更符合组合式API的风格。
四、计算属性与侦听器的高级应用
计算属性和侦听器是处理数据变化逻辑的好帮手。
1. 计算属性
import { ref, computed } from 'vue';
export default {
setup() {
const num1 = ref(1);
const num2 = ref(2);
// 定义一个计算属性，它会根据依赖的响应式数据自动更新
const sum = computed(() => {
return num1.value + num2.value;
});
return {
num1,
num2,
sum
};
}
};
计算属性会缓存计算结果，只有当依赖的响应式数据发生变化时，才会重新计算，性能上比普通方法调用更优。
2. 侦听器
import { ref, watch } from 'vue';
export default {
setup() {
const message = ref('初始值');
// 定义一个侦听器，监听message的变化
watch(message, (newValue, oldValue) => {
console.log('值发生变化了:', newValue, oldValue);
});
return {
message
};
}
};
侦听器可以在数据变化时执行一些自定义逻辑，比如异步请求、数据校验等。
五、路由优化与动态路由
在Vue项目中，路由是必不可少的，“Vue3路由”也是高频搜索词。
1. 动态路由
// 定义动态路由
const routes = [
{
path: '/user/:id',
component: UserComponent
}
];
// 在Vue Router实例中使用这些路由
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes
});
动态路由可以根据不同的参数加载不同的组件，非常适合构建单页应用的页面。
2. 路由守卫
// 全局前置守卫，在每次路由跳转前执行
router.beforeEach((to, from, next) => {
// 可以在这里进行权限验证等逻辑
if (/* 权限验证通过 */) {
next();
} else {
next('/login'); // 跳转到登录页面
}
});
路由守卫能帮助我们控制页面的访问权限，保障应用的安全性。
六、性能优化的实用技巧
性能优化是每个项目都要考虑的，“Vue3性能优化”更是备受关注。
1. 使用v-show和v-if的正确姿势
v-show通过CSS的display属性来控制元素的显示隐藏，切换速度快，但不管是否显示，元素都会存在于DOM中；v-if是真正的条件渲染，元素不存在时不会占用DOM空间，但切换时有一定的性能开销。
<!-- 根据条件决定是否显示，切换频繁用v-show更好 -->
<div v-show="isShow">这是一个可能会频繁显示隐藏的元素</div>
<!-- 根据条件决定是否渲染，初始渲染不需要时用v-if更好 -->
<div v-if="isCreate">这是一个按需创建的元素</div>
2. 列表渲染的key值优化
在使用v-for渲染列表时，key值一定要用唯一标识，这样Vue在更新列表时能更高效地进行Diff算法。
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
七、状态管理的最佳实践
状态管理在大型项目中至关重要，“Vue3状态管理”也是热门话题。
1. 使用Pinia进行状态管理
Pinia是Vue3推荐的状态管理库，比Vuex更简洁易用。
首先安装Pinia：
npm install pinia
// 创建一个Pinia store
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
}
}
});
<template>
<div>
<p>计数: {{ counterStore.count }}</p>
<p>双倍计数: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">增加计数</button>
</div>
</template>
<script>
import { useCounterStore } from './stores/counter';
export default {
setup() {
const counterStore = useCounterStore();
return {
counterStore
};
}
};
</script>
八、自定义指令的强大功能
自定义指令能让我们扩展Vue的功能，实现一些复用性强的逻辑。
// 定义一个自定义指令，用于自动聚焦输入框
import { Directive } from 'vue';
const vFocus: Directive = {
mounted(el) {
// 在元素挂载完成后，让元素自动获取焦点
el.focus();
}
};
export default {
directives: {
focus: vFocus
},
setup() {
return {};
}
};
<input v-focus type="text" placeholder="自动聚焦">
九、SSR（服务器端渲染）与SSG（静态站点生成）
SSR和SSG能提升应用的性能和SEO，“Vue3 SSR”“Vue3 SSG”也是越来越火。
1. SSR示例
使用Nuxt.js可以轻松实现Vue3的SSR。
首先安装Nuxt.js：
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
然后在pages目录下编写页面组件，Nuxt.js会自动处理SSR相关逻辑。
2. SSG示例
使用VitePress可以实现Vue3的SSG。
首先安装VitePress：
npm init vitepress@latest
然后在docs目录下编写Markdown文件和Vue组件，VitePress会在构建时生成静态HTML页面。
十、单元测试与调试技巧
单元测试和调试是保证代码质量的关键，“Vue3单元测试”“Vue3调试”也是前端开发者关心的内容。
1. 单元测试
使用Vue Test Utils和Jest进行单元测试。
首先安装依赖：
npm install --save-dev @vue/test-utils @testing-library/jest-dom jest @babel/core @babel/preset-env @vue/babel-preset-jsx
// 测试一个Vue组件
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';
describe('MyComponent', () => {
it('should render correctly', () => {
const wrapper = mount(MyComponent);
expect(wrapper.html()).toContain('预期的文本');
});
});
2. 调试技巧
在浏览器中使用开发者工具的Sources面板，在setup函数中添加断点，就可以调试Vue3组件的代码啦。还可以使用console.log打印关键数据，快速定位问题。
以上就是10个超实用的Vue3实战技巧，涵盖了从基础到进阶的各个方面。学会这些，你的Vue3开发技能绝对能更上一层楼！赶紧动手在项目中试试吧，有任何问题欢迎在评论区交流~
