各位前端小伙伴，在Vue3的“战场”上，是不是经常被性能问题、数据处理搞得晕头转向？别担心！作为在前端摸爬滚打多年的“老油条”，今天就把10个超实用的Vue3技巧分享给大家。
技巧一：ref和reactive的“性格差异”与搭配使用
在Vue3的响应式“家族”里，ref和reactive可是两位“大明星”，但它们的“性格”截然不同。
reactive就像一个“收纳达人”，擅长管理复杂的对象和数组。举个例子，当你要处理用户信息这种包含多个属性的对象时，reactive就派上用场了。
// 引入reactive函数
import { reactive } from 'vue';
// 创建一个响应式对象，收纳用户信息
const user = reactive({
name: '小明',
age: 25,
address: '北京市朝阳区'
});
// 直接修改对象属性，就像从收纳盒里拿出东西修改
user.age = 26;
而ref呢，更像是一个“独行侠”，专注于单个数据。说实话，当你要处理一个数字、字符串这类基本数据类型时，ref就是你的好帮手。
// 引入ref函数
import { ref } from 'vue';
// 创建一个ref类型的响应式数据，比如计数器
const count = ref(0);
// 修改数据时，需要通过.value属性，就像打开这个独行侠的“小盒子”
count.value++;
那什么时候该用谁呢？你可能会发现，在一些复杂场景下，它们也能“携手合作”。比如，当你需要在一个reactive对象里包含ref类型的数据时，就能实现更灵活的响应式管理。
import { reactive, ref } from 'vue';
// 创建一个reactive对象
const data = reactive({
// 在里面包含一个ref类型的数据
title: ref('Vue3实战技巧')
});
// 修改ref类型的数据
data.title.value = '超实用的Vue3技巧';
为什么这样搭配有效？关键在于它们各司其职，发挥各自的优势，让响应式数据管理更加得心应手。是不是很神奇？
技巧二：computed“偷懒神器”的高效运用
在Vue3的世界里，computed就像是一个“偷懒小能手”，它能帮你自动计算一些依赖数据的结果，避免重复劳动。
举个例子，在一个购物车功能中，你需要实时计算商品的总价。如果每次数据变化都手动计算，那得多麻烦！这时候，computed就闪亮登场了。
import { ref } from 'vue';
// 定义商品的单价和数量
const price = ref(10);
const quantity = ref(2);
// 使用computed计算总价，只有当price或quantity变化时才会重新计算
const totalPrice = computed(() => price.value * quantity.value);
// 修改单价或数量，总价会自动更新
price.value = 15;
为什么这个方法有效？关键在于computed会自动“记住”哪些数据被它依赖，只有这些依赖数据发生变化时，它才会重新计算。必须强调的是，这大大提高了性能，尤其是在处理复杂计算逻辑时。
再比如，在一个展示文章列表的页面中，你需要根据文章的发布时间进行排序。使用computed就能轻松实现。
import { ref } from 'vue';
// 定义文章列表
const articles = ref([
{ title: '文章1', date: '2024-01-01' },
{ title: '文章2', date: '2024-01-02' },
{ title: '文章3', date: '2024-01-03' }
]);
// 使用computed对文章列表进行排序
const sortedArticles = computed(() => articles.value.sort((a, b) => new Date(a.date) - new Date(b.date)));
这样，当文章列表数据发生变化时，排序结果会自动更新，是不是很方便？
技巧三：watch“小侦探”的精准数据监听
watch就像一个“小侦探”，时刻盯着数据的变化，一旦发现数据有变动，就立即执行相应的操作。
你可能会遇到这样的场景：在一个表单中，当用户输入邮箱地址后，你需要实时验证邮箱格式是否正确。这时候，watch就能发挥作用了。
import { ref } from 'vue';
// 定义邮箱输入框的绑定数据
const email = ref('');
// 使用watch监听email的变化
watch(email, (newValue, oldValue) => {
// 验证邮箱格式
if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newValue)) {
console.log('邮箱格式正确');
} else {
console.log('邮箱格式错误');
}
});
// 模拟用户输入邮箱
email.value = 'example@example.com';
这里的watch会在email数据发生变化时，立即执行回调函数，检查邮箱格式。令人惊讶的是，它还能同时获取到新值和旧值，方便你进行各种对比和处理。
再比如，在一个实时更新的天气应用中，你需要监听地理位置的变化，及时获取新位置的天气信息。
import { ref } from 'vue';
// 定义地理位置数据
const location = ref('北京');
// 使用watch监听location的变化
watch(location, (newLocation, oldLocation) => {
// 模拟获取新位置的天气信息
console.log(`从${oldLocation}切换到${newLocation}，正在获取${newLocation}的天气`);
});
// 模拟地理位置变化
location.value = '上海';
通过watch，你可以轻松实现对数据变化的精准监听，处理各种复杂的业务逻辑。
技巧四：组件通信“小信使”的高效协作
在Vue3的组件“大家庭”里，组件之间需要频繁地传递信息，这时候就需要一些“小信使”来帮忙——props和emit就是其中的佼佼者。
props就像是“快递员”，负责把父组件的数据传递给子组件。举个例子，在一个父子组件结构中，父组件有一个商品列表，需要展示在子组件中。
<!-- 父组件 -->
<template>
<div>
<ChildComponent :products="productList" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
components: {
ChildComponent
},
setup() {
// 定义商品列表数据
const productList = ref([
{ name: '商品1', price: 10 },
{ name: '商品2', price: 20 }
]);
return {
productList
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<ul>
<li v-for="product in products" :key="product.name">{{ product.name }} - {{ product.price }}</li>
</ul>
</div>
</template>
<script>
import { defineProps } from 'vue';
export default {
// 定义props接收父组件传递的数据
props: {
products: {
type: Array,
required: true
}
}
};
</script>
而emit则像是“传信员”，子组件通过它向父组件传递消息。比如，子组件中有一个“添加到购物车”的按钮，点击后需要通知父组件更新购物车数据。
<!-- 子组件 -->
<template>
<div>
<button @click="addToCart">添加到购物车</button>
</div>
</template>
<script>
import { defineEmits } from 'vue';
export default {
setup() {
// 定义emit事件
const emit = defineEmits(['addProduct']);
const addToCart = () => {
// 模拟要添加的商品数据
const product = { name: '商品3', price: 30 };
// 触发事件，向父组件传递数据
emit('addProduct', product);
};
return {
addToCart
};
}
};
</script>
<!-- 父组件 -->
<template>
<div>
<ChildComponent @addProduct="handleAddProduct" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
components: {
ChildComponent
},
setup() {
const cart = ref([]);
const handleAddProduct = (product) => {
// 将商品添加到购物车
cart.value.push(product);
};
return {
cart,
handleAddProduct
};
}
};
</script>
通过props和emit这两位“小信使”的协作，组件之间的通信变得高效又便捷。
技巧五：生命周期钩子函数“时间管理员”的精准把控
在Vue3组件的“一生”中，有几个重要的时间节点，需要一些“时间管理员”来帮忙处理相应的事务——这就是生命周期钩子函数。
onMounted就像是组件的“出生仪式主持人”，在组件挂载到DOM后，它会立即执行相关操作。举个例子，当你需要在组件加载完成后发送网络请求获取数据时，就可以用到它。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 模拟发送网络请求获取数据
console.log('组件已挂载，正在获取数据...');
});
return {};
}
};
onUpdated则像是“更新监督员”，当组件的数据发生变化，导致重新渲染后，它会执行相应逻辑。比如，在一个实时更新的图表组件中，数据更新后需要重新绘制图表。
import { ref, onUpdated } from 'vue';
export default {
setup() {
const data = ref([1, 2, 3]);
onUpdated(() => {
// 模拟重新绘制图表
console.log('数据已更新，正在重新绘制图表...');
});
return {
data
};
}
};
onUnmounted是“离场清道夫”，在组件从DOM中移除前，它会清理一些资源，比如清除定时器、解绑事件监听等，避免内存泄漏。
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
let timer;
onMounted(() => {
timer = setInterval(() => {
console.log('定时器正在运行...');
}, 1000);
});
onUnmounted(() => {
// 清除定时器
clearInterval(timer);
console.log('组件即将卸载，已清除定时器');
});
return {};
}
};
通过合理利用这些生命周期钩子函数，你可以精准把控组件在不同阶段的行为，让组件运行得更加稳定。
技巧六：自定义指令“超级工具人”的灵活运用
自定义指令就像是Vue3的“超级工具人”，可以为元素添加一些复用性的功能，让你的代码更加简洁高效。
举个例子，在很多项目中，都需要实现按钮的防抖功能，避免用户频繁点击导致多次请求。这时候，就可以自定义一个防抖指令。
import { createApp } from 'vue';
const app = createApp({});
// 自定义防抖指令
app.directive('debounce', {
mounted(el, binding) {
let timer;
// 给元素绑定点击事件
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer);
}
// 延迟执行回调函数
timer = setTimeout(() => {
binding.value();
}, binding.modifiers.time || 300);
});
}
});
app.mount('#app');
<template>
<button v-debounce.time="500" @click="fetchData">获取数据</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const fetchData = () => {
console.log('执行数据请求');
};
return {
fetchData
};
}
};
</script>
这个自定义的debounce指令就像一个“贴心小助手”，自动帮你处理防抖逻辑，你只需要在按钮上简单使用指令，就能实现防抖功能。
再比如，你可以自定义一个指令来实现元素的自动聚焦功能。
import { createApp } from 'vue';
const app = createApp({});
// 自定义自动聚焦指令
app.directive('focus', {
mounted(el) {
// 让元素自动获取焦点
el.focus();
}
});
app.mount('#app');
<template>
<input v-focus type="text" placeholder="自动聚焦">
</template>
通过自定义指令，你可以根据项目需求，打造各种专属的“超级工具”，提升开发效率。
技巧七：路由守卫“安全卫士”的严格把关
在Vue Router中，路由守卫就像是“安全卫士”，严格把控着页面的访问权限，确保用户只能访问他们有权限查看的页面。
比如，在一个后台管理系统中，有些页面只有管理员才能访问。这时候，就可以使用全局前置守卫来进行权限验证。
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import AdminPage from './views/AdminPage.vue';
const routes = [
{
path: '/',
component: Home
},
{
path: '/admin',
component: AdminPage
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 假设这里有一个获取用户角色的函数
const userRole = getUserRole();
if (to.path === '/admin' && userRole!== 'admin') {
// 如果不是管理员，重定向到首页
next('/');
} else {
next();
}
});
function getUserRole() {
// 实际应用中应从用户信息中获取角色
return 'user';
}
export default router;
这里的全局前置守卫会在每次路由跳转前执行，检查用户的权限。要是发现用户没有权限访问目标页面，就会把用户“送”到合适的页面，保证系统的安全性。
除了全局前置守卫，还有其他类型的路由守卫，比如全局后置守卫、路由独享守卫等，它们各自发挥着不同的作用，共同守护着路由的安全。
技巧八：Pinia“数据管家”的高效管理
在Vue3项目中，当数据共享变得复杂时，就需要一个靠谱的“数据管家”——Pinia来帮忙管理状态。
举个例子，在一个多页面的应用中，多个组件都需要共享用户的登录状态。使用Pinia就能轻松实现。
首先，安装Pinia：
npm install pinia
然后，创建一个store：
import { defineStore } from 'pinia';
// 定义一个用户状态的store
export const useUserStore = defineStore('user', {
state: () => ({
isLoggedIn: false,
userInfo: null
}),
actions: {
login(user) {
this.isLoggedIn = true;
this.userInfo = user;
},
logout() {
this.isLoggedIn = false;
this.userInfo = null;
}
}
});
在组件中使用store：
<template>
<div>
<button v-if="!userStore.isLoggedIn" @click="userStore.login({ name: '小明', id: 1 })">登录</button>
<button v-if="userStore.isLoggedIn" @click="userStore.logout()">注销</button>
<p v-if="userStore.isLoggedIn">欢迎，{{ userStore.userInfo.name }}</p>
</div>
</template>
<script>
import { useUserStore } from './stores/user';
import { setup } from 'vue';
export default {
setup() {
const userStore = useUserStore();
return {
userStore
};
}
};
</script>
Pinia就像一个细心的“数据管家”，把共享数据整理得井井有条，各个组件都能方便地获取和修改数据，而且数据的更新会自动同步到所有使用它
技巧九：Suspense“加载协调员”的巧妙调度
在开发Vue3应用时，有没有遇到过这样的尴尬情况？异步组件还没加载完，页面突然白屏，用户一脸懵，体验感直线下降。别着急，Suspense这位“加载协调员”能帮你巧妙化解这个难题。
Suspense就像一位经验丰富的舞台导演，在异步组件加载时，它会先安排一段精彩的“开场表演”稳住观众，等异步组件准备就绪，再无缝切换到正式节目。
<template>
<Suspense>
<!-- 异步组件加载成功后展示的内容 -->
<template #default>
<AsyncComponent />
</template>
<!-- 异步组件加载过程中展示的占位内容 -->
<template #fallback>
<div class="loading-spinner">努力加载中，别走开~</div>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent, Suspense } from 'vue';
// 定义异步组件，只有在使用时才会加载对应的代码
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
export default {
components: {
Suspense,
AsyncComponent
}
};
</script>
这里的Suspense会先渲染#fallback插槽里的内容，比如一个加载动画或提示文字。令人惊讶的是，当异步组件加载完成后，它会瞬间切换到#default插槽的内容，整个过程流畅自然。
举个例子，在开发一个博客详情页时，文章内容通过异步请求获取，使用Suspense就能在等待数据返回的过程中，先给用户展示“正在加载文章”的提示，而不是让页面一片空白。这不仅提升了“用户体验”，还避免了因加载延迟导致的“页面性能”问题，妥妥的“Vue3性能优化”必备技巧！
技巧十：自定义Hooks“代码魔法师”的神奇变身
还在为项目里重复的代码片段头疼吗？明明是相似的功能，却要在不同组件里反复编写，既浪费时间又增加维护成本。别担心，自定义Hooks这位“代码魔法师”能让你的代码实现神奇变身！
自定义Hooks就像一位技艺高超的魔法师，它可以把散落各处的相似代码收集起来，经过“魔法加工”变成可复用的“代码咒语”。以后在其他组件中需要同样功能时，只需念动“咒语”（调用Hooks），就能轻松实现。
比如说，在多个表单组件中都需要实现输入框的防抖功能，以及验证输入内容是否为空的逻辑。这时候，就可以把这些逻辑封装成一个自定义Hooks。
import { ref, watch } from 'vue';
// 自定义表单处理的Hook
function useFormInput(initialValue = '', debounceTime = 300) {
const inputValue = ref(initialValue);
const debouncedValue = ref(initialValue);
let timer;
watch(inputValue, (newValue) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
debouncedValue.value = newValue;
}, debounceTime);
});
const isEmpty = () => {
return debouncedValue.value.trim() === '';
};
return {
inputValue,
debouncedValue,
isEmpty
};
}
export default useFormInput;
在组件中使用这个Hooks：
<template>
<div>
<input v-model="input.inputValue" placeholder="请输入内容">
<p v-if="input.isEmpty()">内容不能为空</p>
<button @click="handleSubmit" :disabled="input.isEmpty()">提交</button>
</div>
</template>
<script>
import useFormInput from './useFormInput';
export default {
setup() {
// 调用自定义Hooks
const input = useFormInput();
const handleSubmit = () => {
console.log('提交的数据:', input.debouncedValue.value);
};
return {
input,
handleSubmit
};
}
};
</script>
通过自定义Hooks，不仅减少了代码重复，还提高了开发效率。要特别警惕的是，不合理的代码复用可能会带来潜在问题，所以在封装Hooks时，要确保逻辑的通用性和稳定性。经过验证的最佳实践是，将相关联的功能逻辑尽量集中在一个Hooks中，这样既方便管理，又便于后续维护。
这10个Vue3实战技巧，从数据响应式管理到组件性能优化，从状态管理到代码复用，每一个都凝聚着实战经验。希望大家在实际开发中多多运用，让Vue3项目开发变得更加轻松愉快！如果在使用过程中遇到任何问题，或者还想了解更多Vue3技巧，欢迎在评论区交流讨论，咱们一起在前端的道路上不断进步！
