JavaScript大前端
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