写 Vue3 项目时，是不是总被数据更新延迟、组件间传值混乱、页面加载缓慢这些问题折磨得头秃？别担心！作为摸爬滚打多年的老前端，今天掏出压箱底的 10 个实战技巧，从性能优化到复杂逻辑处理，每一个都能直接抄进项目，让你的开发效率原地起飞！

一、readonly：保护数据的 “安全卫士”，防止误修改

在开发中，有些数据我们只希望读取，不希望被意外修改，但稍不注意就可能改错。readonly就像给数据加上了一把 “安全锁”，让数据只能看不能改！

import { ref, readonly } from 'vue';
// 定义一个普通的响应式数据
const originalData = ref(10);
// 使用readonly创建一个只读版本的数据
const protectedData = readonly(originalData);
// 尝试修改protectedData会报错
// protectedData.value = 20; // 这行代码会报错
// 可以正常读取数据
console.log(protectedData.value); // 输出10

在一些配置项、全局状态等不允许随意修改的数据场景中，readonly能有效避免因误操作引发的各种问题，让代码更加健壮！

二、watchEffect与onInvalidate：处理副作用的 “黄金搭档”

当我们在watchEffect中执行一些异步操作或副作用时，比如监听数据变化后发送网络请求，如果组件卸载时不清理这些副作用，很容易造成内存泄漏。onInvalidate就是用来解决这个问题的！

import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect((onInvalidate) => {
// 设置一个定时器，模拟副作用
const timer = setInterval(() => {
console.log('定时器执行：', count.value);
}, 1000);
// 当watchEffect失效（比如组件卸载）时，清除定时器
onInvalidate(() => {
clearInterval(timer);
});
});
return {
count
};
}
};

watchEffect自动追踪依赖，onInvalidate及时清理副作用，二者配合，让你的代码既高效又安全！

三、provide/inject与函数结合：实现更灵活的跨组件通信

虽然provide/inject可以实现跨组件通信，但有时我们希望传递的不是固定的数据，而是一个函数，这样子组件可以根据自身需求调用。

// 在父组件中
import { provide } from 'vue';
export default {
setup() {
// 定义一个函数，用于获取当前时间
const getCurrentTime = () => new Date().toLocaleString();
// 提供函数
provide('getTime', getCurrentTime);
return {};
}
};
// 在子组件中
import { inject } from 'vue';
export default {
setup() {
// 注入函数
const getTime = inject('getTime');
const showTime = () => {
console.log('当前时间：', getTime());
};
return {
showTime
};
}
};

这种方式让跨组件通信更加灵活，特别适合一些公共逻辑的复用，比如获取用户信息、调用公共接口等场景。

四、v-for与key的正确姿势：提升列表渲染性能的关键

在使用v-for渲染列表时，key值的设置至关重要。一个错误的key可能导致列表更新时出现各种奇怪的问题，比如元素复用错误、动画异常等。

<template>
<ul>
<!-- 使用唯一的id作为key，确保每个列表项的唯一性 -->
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const list = ref([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]);
return {
list
};
}
};
</script>

千万不要使用数组索引作为key，因为当数组元素顺序变化时，索引key无法正确识别每个元素，会导致 Vue 的虚拟 DOM diff 算法出现错误，影响性能和渲染结果。

五、defineExpose：精准控制组件对外暴露的内容

在使用组合式 API 开发组件时，默认情况下，setup函数返回的所有内容都会暴露给父组件。但有时我们不希望所有数据和方法都被外部访问，defineExpose就可以帮我们精准控制暴露的内容。

import { ref } from 'vue';
export default {
setup() {
const privateData = ref('这是私有数据');
const publicData = ref('这是公开数据');
const privateMethod = () => {
console.log('这是私有方法');
};
const publicMethod = () => {
console.log('这是公开方法');
};
// 使用defineExpose指定对外暴露的内容
defineExpose({
publicData,
publicMethod
});
return {
privateData,
privateMethod,
publicData,
publicMethod
};
}
};

这样在父组件中，就只能访问到publicData和publicMethod，保护了组件内部的私有逻辑。

六、computed的高级用法：实现复杂数据的动态计算与缓存

computed不仅可以用于简单的数据计算，还能处理复杂的逻辑，并且自带缓存功能，只有当依赖的数据发生变化时才会重新计算。

import { ref, computed } from 'vue';
export default {
setup() {
const firstNumber = ref(10);
const secondNumber = ref(20);
const operator = ref('+');
// 使用computed根据不同的操作符进行计算
const result = computed(() => {
if (operator.value === '+') {
return firstNumber.value + secondNumber.value;
} else if (operator.value === '-') {
return firstNumber.value - secondNumber.value;
}
return 0;
});
return {
firstNumber,
secondNumber,
operator,
result
};
}
};

在处理表格数据的筛选、排序条件计算，或者表单中多个字段的联动计算时，computed的缓存特性可以大大提升性能，减少不必要的重复计算。

七、useAttrs与useListeners：轻松处理组件的透传属性和事件

在开发可复用的组件时，经常需要将父组件传递的属性和事件透传给子组件。在 Vue3 中，useAttrs和useListeners可以让这个过程变得更加简单。

import { useAttrs, useListeners } from 'vue';
export default {
setup() {
const attrs = useAttrs();
const listeners = useListeners();
return {
attrs,
listeners
};
},
render() {
// 将attrs和listeners透传给子组件
return <ChildComponent {...this.attrs} v-on="this.listeners" />;
}
};

这样在组件内部就可以方便地处理和透传父组件的属性和事件，特别是在开发像按钮组、表单控件组等复合组件时，非常实用！

八、Fragment：无需额外标签的多根节点渲染

在 Vue3 中，我们经常遇到模板需要返回多个根节点的情况，但 Vue 要求模板只能有一个根节点。Fragment可以解决这个问题，它允许我们在不添加额外标签的情况下，渲染多个元素。

<template>
<Fragment>
<h1>标题</h1>
<p>内容</p>
</Fragment>
</template>
<script>
import { Fragment } from 'vue';
export default {
setup() {
return {};
}
};
</script>

在编写一些布局组件或者需要返回多个同级元素的场景中，Fragment能让代码更加简洁，避免不必要的冗余标签。

九、keep-alive的max属性：控制缓存组件的数量

keep-alive可以缓存组件实例，提升性能，但如果缓存的组件过多，可能会占用大量内存。keep-alive的max属性可以限制缓存组件的最大数量，当超过这个数量时，会按照 LRU（最近最少使用）算法移除最早缓存的组件。

<template>
<div>
<!-- 最多缓存3个组件实例 -->
<keep-alive :max="3">
<router-view></router-view>
</keep-alive>
</div>
</template>

在一些页面较多的大型应用中，合理设置max属性，可以在保证性能的同时，有效控制内存占用。

十、createRenderer：自定义渲染器，拓展 Vue 的边界

如果你对 Vue 的默认渲染机制不满意，或者想实现一些特殊的渲染需求，比如将 Vue 应用渲染到 WebGL 画布上，createRenderer可以让你自定义渲染器！

import { createRenderer } from 'vue';
const { render, createApp } = createRenderer({
// 自定义节点创建逻辑
createElement(type) {
return document.createElement(type);
},
// 自定义属性设置逻辑
patchProp(el, key, prevValue, nextValue) {
if (key === 'class') {
el.className = nextValue || '';
} else if (key === 'style') {
el.style.cssText = nextValue || '';
} else {
if (nextValue === undefined || nextValue === null) {
el.removeAttribute(key);
} else {
el.setAttribute(key, nextValue);
}
}
},
// 其他必要的渲染函数实现...
});
const app = createApp({
data() {
return {
message: '自定义渲染器示例'
};
},
template: '<div>{{ message }}</div>'
});
const root = document.createElement('div');
document.body.appendChild(root);
render(app, root);

虽然createRenderer的使用场景相对较少，但它为 Vue 的拓展提供了无限可能，让你可以根据自己的需求定制独特的渲染方式。

看完这 10 个技巧，相信你对 Vue3 开发有了全新的认识。那么问题来了：在实际项目中，keep-alive的max属性设置多少比较合适？是优先考虑内存占用，还是更看重缓存带来的性能提升？快来评论区分享你的观点，一起探讨更优的解决方案！