Vue3开发技巧大全：从入门到精通的实用指南
这篇文章整理了日常开发中高频使用的Vue3技巧，涵盖语法、组件、工具和性能优化。代码可以直接复制使用，帮你减少冗余代码。
一、语法糖：少写代码，少踩坑
1. 自动导入
用unplugin-auto-import插件，不用手动导入ref、reactive、computed、watch、useRoute这些API，直接就能写。
<script setup>
// 不用写 import { ref, computed } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
</script>2. defineProps简写
TypeScript环境下，不用重复写类型，直接用TS类型声明props。
<script setup lang="ts">
// 旧写法
const props = defineProps<{
title: string
list?: number[]
}>()
// 更简洁的写法：直接解构加默认值
const { title = '默认标题', list = [] } = defineProps<{
title?: string
list?: number[]
}>()
</script>3. defineEmits简写
<script setup>
// 一行就能声明事件
const emit = defineEmits<{
change: [id: number]
close: []
}>()
// 直接使用
emit('change', 123)
</script>4. v-model简化
不用分别写props和emit，一行就能实现父子双向绑定。
子组件：
<script setup>
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<['update:modelValue']>()
</script>父组件：
<template>
<Child v-model="form.name" />
</template>二、组件复用：告别重复代码
1. 组合式函数抽离逻辑
把表单、请求、弹窗这些逻辑抽成useXxx，所有页面都能复用。
// useCount.js
import { ref } from 'vue'
export function useCount() {
const count = ref(0)
const add = () => count.value++
return { count, add }
}
// 页面中使用
const { count, add } = useCount()2. 动态组件加keep-alive缓存
不用写很多v-if，切换组件时自动缓存状态。
<template>
<!-- 不缓存 -->
<component :is="activeComp" />
<!-- 缓存组件状态 -->
<keep-alive>
<component :is="activeComp" />
</keep-alive>
</template>3. 自定义指令简化DOM操作
封装自定义指令，替代重复的document.getElementById。
// 自动聚焦指令
app.directive('focus', {
mounted(el) { el.focus() }
})
// 使用
<input v-focus />三、开发效率：少调试，快运行
1. 模板里直接用props和emit
模板里不用另外定义变量，直接就能用。
<template>
<div>{{ $props.title }}</div>
<button @click="$emit('close')">关闭</button>
</template>2. 批量绑定属性
用v-bind可以一次绑定多个属性。
<template>
<input v-bind="{ placeholder: '请输入', disabled: true, maxlength: 10 }" />
</template>3. 样式穿透修改UI库样式
修改Element Plus或Ant Design组件样式时，不用加important。
<style scoped>
:deep(.el-input__inner) {
border-color: #ccc;
}
</style>4. 全局组件自动注册
用unplugin-vue-components插件，组件不用手动import，直接用。
<template>
<!-- 不用写 import Card from '@/components/Card.vue' -->
<Card />
</template>四、性能优化和调试：代码更稳更快
1. 变量解构不丢失响应式
用toRefs可以保证解构后的变量依然是响应式的。
const state = reactive({ name: '张三', age: 18 })
// 正确做法：解构后依然保持响应式
const { name, age } = toRefs(state)2. 计算属性有缓存比方法快
<template>
<!-- 慢：每次渲染都会重新执行 -->
<div>{{ getFullName() }}</div>
<!-- 快：依赖没变就会用缓存 -->
<div>{{ fullName }}</div>
</template>3. 控制台快速调试
把应用实例挂载到全局，浏览器控制台可以直接调试。
// main.ts
app.config.globalProperties.$vm = app
// 浏览器控制台直接用
$vm.$route
$vm.$store4. 强制刷新组件
通过改变key值来强制刷新组件。
<template>
<Child :key="refreshKey" />
</template>
<script setup>
const refreshKey = ref(0)
// 调用这个方法就能刷新组件
const refresh = () => refreshKey.value++
</script>五、工具链推荐
VSCode插件方面，推荐安装Volar和Vue 3 Snippets，这两个对代码补全很有帮助。
包管理工具建议用pnpm代替npm，安装速度快3倍。
开发服务器用vite代替webpack，热更新几乎是秒开。
代码格式化用prettier加eslint，可以自动规范代码。
总结
多用自动导入和defineProps、defineEmits的简写写法，能减少不少模板代码。
逻辑尽量抽成use开头的组合函数，复用率能拉满。
v-model、v-bind、:deep这些是日常最高频的简化语法，多用就对了。
配合Volar和Vite，开发体验会好很多。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
