Vue 3 开发必备：10个提升效率的实用技巧
vue 3 带来了很多新特性和改进，让开发变得更加高效。无论是新手还是有经验的开发者，掌握这些技巧都能让你的代码更简洁、性能更好。
1. 正确使用 ref 和 reactive 管理数据
Vue 3 提供了两种创建响应式数据的方法：
ref - 适合基本类型数据（字符串、数字等）
import { ref } from 'vue';
const count = ref(0);
const name = ref('张三');
// 使用时需要.value
console.log(count.value); // 0
count.value = 1;reactive - 适合对象和数组
import { reactive } from 'vue';
const user = reactive({
name: '李四',
age: 25,
hobbies: ['读书', '运动']
});
// 直接使用，不需要.value
console.log(user.name); // 李四
user.age = 26;使用建议：
简单数据用 ref
复杂对象用 reactive
在模板中，ref 会自动解包，不需要写 .value
2. 组合式 api 让代码更清晰
组合式 API 可以把相关逻辑组织在一起，让代码更容易维护：
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
// 数据
const count = ref(0);
const todos = ref([]);
// 计算属性
const unfinishedTodos = computed(() => {
return todos.value.filter(todo => !todo.done);
});
// 方法
function addTodo(text) {
todos.value.push({ text, done: false });
}
// 生命周期
onMounted(() => {
console.log('组件加载完成');
});
return {
count,
todos,
unfinishedTodos,
addTodo
};
}
};好处：
相关功能代码在一起，容易查找
逻辑可以复用
类型推导更好
3. 监听数据变化的两种方式
watch - 精确监听特定数据
import { ref, watch } from 'vue';
const count = ref(0);
const user = reactive({ name: '王五', age: 30 });
// 监听单个数据
watch(count, (newValue, oldValue) => {
console.log(`计数从 ${oldValue} 变为 ${newValue}`);
});
// 监听对象属性
watch(() => user.name, (newName, oldName) => {
console.log(`名字从 ${oldName} 改为 ${newName}`);
});watchEffect - 自动追踪依赖
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
// 自动追踪 count.value
console.log(`当前计数：${count.value}`);
document.title = `计数：${count.value}`;
});选择建议：
需要知道变化前后值用 watch
只是响应变化用 watchEffect
4. 跨组件传递数据
深层嵌套组件传递数据，不需要一层层传 props：
父组件提供数据：
import { provide, ref } from 'vue';
export default {
setup() {
const user = ref({ name: '赵六', role: 'admin' });
// 提供数据
provide('user', user);
provide('theme', 'dark');
}
};子组件接收数据：
import { inject } from 'vue';
export default {
setup() {
// 注入数据
const user = inject('user');
const theme = inject('theme', 'light'); // 默认值
return { user, theme };
}
};5. 把组件渲染到任意位置
Teleport 可以把组件渲染到 dom 的其他位置，适合弹窗、通知等：
<template>
<button @click="show = true">打开弹窗</button>
<Teleport to="body">
<div v-if="show" class="modal">
<h3>这是一个弹窗</h3>
<p>内容显示在 body 末尾</p>
<button @click="show = false">关闭</button>
</div>
</Teleport>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
return { show };
}
};
</script>6. 优雅处理异步组件
Suspense 让异步组件加载有更好的用户体验：
<template>
<Suspense>
<!-- 主要内容 -->
<template #default>
<AsyncUserProfile />
</template>
<!-- 加载中的显示 -->
<template #fallback>
<div class="loading">加载中...</div>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from 'vue';
// 异步组件
const AsyncUserProfile = defineAsyncComponent(() =>
import('./UserProfile.vue')
);
export default {
components: {
AsyncUserProfile
}
};
</script>7. 多个 v-model 绑定
Vue 3 支持多个 v-model，让表单处理更方便：
<template>
<!-- 多个 v-model -->
<UserForm
v-model:name="userName"
v-model:age="userAge"
v-model:email="userEmail"
/>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const userName = ref('');
const userAge = ref('');
const userEmail = ref('');
return { userName, userAge, userEmail };
}
};
</script>子组件 UserForm.vue：
<template>
<input
:value="name"
@input="$emit('update:name', $event.target.value)"
placeholder="姓名"
>
<input
:value="age"
@input="$emit('update:age', $event.target.value)"
placeholder="年龄"
>
<input
:value="email"
@input="$emit('update:email', $event.target.value)"
placeholder="邮箱"
>
</template>
<script>
export default {
props: ['name', 'age', 'email'],
emits: ['update:name', 'update:age', 'update:email']
};
</script>8. 更好的 TypeScript 支持
使用 defineComponent 获得更好的类型提示：
import { defineComponent, ref } from 'vue';
interface User {
name: string;
age: number;
}
export default defineComponent({
props: {
userId: {
type: Number,
required: true
}
},
setup(props) {
const user = ref<User | null>(null);
const loading = ref(false);
// 现在有完整的类型提示
async function fetchUser() {
loading.value = true;
// 获取用户数据
loading.value = false;
}
return {
user,
loading,
fetchUser
};
}
});9. 多根节点组件
Vue 3 组件可以有多个根节点，减少不必要的 div：
<template>
<header>页面头部</header>
<main>主要内容</main>
<footer>页面底部</footer>
</template>
<script>
export default {
// 不需要外层 div
};
</script>10. 自定义指令
创建自己的指令来处理 DOM 操作：
// 自动聚焦指令
const vFocus = {
mounted(el) {
el.focus();
},
updated(el, binding) {
if (binding.value) {
el.focus();
}
}
};
export default {
directives: {
focus: vFocus
}
};使用指令：
<template>
<input v-focus placeholder="自动获得焦点">
<input v-focus="shouldFocus" placeholder="条件聚焦">
</template>
<script>
export default {
setup() {
const shouldFocus = ref(true);
return { shouldFocus };
}
};
</script>实用建议
性能优化：
使用 shallowRef 和 shallowReactive 避免不必要的深度响应
合理使用 computed 缓存计算结果
在列表渲染中使用 key
代码组织：
开发体验：
使用 Vue Devtools 调试
配置 ESLint 和 Prettier
编写单元测试
掌握这些 Vue 3 技巧后，你会发现开发效率明显提升。建议在实际项目中逐步尝试这些特性，根据具体需求选择合适的方法。
记住，好的工具要用在合适的地方。不要为了用新特性而用新特性，选择最能解决实际问题的方法才是最重要的。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！