Vue 3 编程的 10 个实用技巧
Vue 3 开发的 10 个实用技巧,涵盖响应式数据管理(ref/reactive)、组合式 API、数据监听(watch/watchEffect)、跨组件通信(provide/inject)、Teleport、Suspense、v-model 改进、defineComponent TypeScript 支持、Fragment 多根节点及自定义指令。掌握这些技巧有助于提升代码质量与开发效率。

Vue 3 开发的 10 个实用技巧,涵盖响应式数据管理(ref/reactive)、组合式 API、数据监听(watch/watchEffect)、跨组件通信(provide/inject)、Teleport、Suspense、v-model 改进、defineComponent TypeScript 支持、Fragment 多根节点及自定义指令。掌握这些技巧有助于提升代码质量与开发效率。

ref 和 reactive 管理响应式数据Vue 3 引入了 ref 和 reactive 两个核心 API 来管理响应式数据:
ref:用于创建基本类型(如字符串、数字)的响应式数据,返回一个包含 value 属性的对象。reactive:用于创建复杂对象或数组的响应式数据,返回一个代理对象。import { ref, reactive } from 'vue';
// 使用 ref 管理基本类型数据
const count = ref(0);
console.log(count.value); // 0
// 使用 reactive 管理复杂对象
const state = reactive({
name: 'Vue 3',
version: '3.2.0',
});
console.log(state.name); // Vue 3
ref 时,需要通过 .value 访问或修改数据。reactive 只能用于对象或数组,不能用于基本类型。组合式 API 是 Vue 3 的核心特性之一,它允许开发者将逻辑代码组织成可复用的函数,而不是依赖于选项式 API(如 data、methods 等)。通过 setup 函数,开发者可以更灵活地管理组件的状态和逻辑。
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return {
count,
doubleCount,
increment,
};
},
};
watch 和 watchEffect 监听数据变化watch:用于监听特定响应式数据的变化,支持深度监听和懒执行。watchEffect:自动追踪其依赖的响应式数据,并在依赖变化时立即执行。import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
// 使用 watchEffect 自动追踪依赖
watchEffect(() => {
console.log(`count is now ${count.value}`);
});
watch 更适合精确控制监听逻辑。watchEffect 适合不需要明确指定依赖的场景。provide 和 inject 实现跨组件通信provide 和 inject 是 Vue 3 中实现跨组件通信的 API,特别适合在深层嵌套组件中传递数据。
// 父组件
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello from parent');
provide('message', message);
},
};
// 子组件
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
},
};
props 的繁琐。Teleport 实现组件挂载到任意位置Teleport 是 Vue 3 新增的特性,允许将组件的内容渲染到 DOM 中的任意位置,常用于模态框、通知等场景。
<template>
<button @click="showModal = true">Open Modal</button>
<Teleport to="body">
<div v-if="showModal" class="modal">
<p>This is a modal!</p>
<button @click="showModal = false">Close</button>
</div>
</Teleport>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const showModal = ref(false);
return { showModal };
},
};
</script>
Suspense 处理异步组件加载Suspense 是 Vue 3 中用于处理异步组件加载的特性,可以在组件加载完成前显示占位内容。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
export default {
components: {
AsyncComponent,
},
};
</script>
v-model 实现双向绑定Vue 3 对 v-model 进行了改进,支持多个 v-model 绑定,并可以通过 modelValue 和 update:modelValue 自定义绑定逻辑。
<template>
<CustomInput v-model:firstName="firstName" v-model:lastName="lastName" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
return { firstName, lastName };
},
};
</script>
CustomInput<template>
<input :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
<input :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
</template>
<script>
export default {
props: ['firstName', 'lastName'],
};
</script>
v-model 绑定。defineComponent 增强 TypeScript 支持defineComponent 是 Vue 3 中用于增强 TypeScript 支持的 API,可以提供更好的类型推断和代码提示。
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
return { count };
},
});
Fragment 减少不必要的 DOM 元素Vue 3 支持多根节点组件(Fragment),可以减少不必要的 DOM 元素,提升渲染性能。
<template>
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</template>
Custom Directives 自定义指令Vue 3 允许开发者自定义指令,用于直接操作 DOM 元素。
import { directive } from 'vue';
const vFocus = {
mounted(el) {
el.focus();
},
};
export default {
directives: {
focus: vFocus,
},
};
<input v-focus />
本文详细介绍了 Vue 3 编程中的 10 个实用技巧,涵盖了响应式数据管理、组合式 API、跨组件通信、异步组件加载等多个方面。通过掌握这些技巧,开发者可以更高效地构建现代化的 Vue 应用,提升代码质量和开发体验。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online