Vue 3 实战：10 个提升开发效率的常用技巧

优势在于逻辑复用性更强，代码组织更清晰，尤其是处理复杂组件时。

3. 使用 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 适合不需要明确指定依赖的场景。

4. 使用 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 的繁琐，适合全局状态管理（如主题、用户信息等）。

5. 使用 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>

优势在于解决组件层级和样式隔离问题，同时提升用户体验。

6. 使用 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>

这能提升用户体验，避免页面空白，并简化异步组件加载逻辑。

7. 使用 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 绑定，提供更灵活的双向绑定实现。

8. 使用 defineComponent 增强 TypeScript 支持

defineComponent 是 Vue 3 中用于增强 TypeScript 支持的 API，可以提供更好的类型推断和代码提示。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return { count };
  },
});

这提升了 TypeScript 开发体验，带来更好的类型安全和代码提示。

9. 使用 Fragment 减少不必要的 DOM 元素

Vue 3 支持多根节点组件（Fragment），可以减少不必要的 DOM 元素，提升渲染性能。

<template>
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</template>

优势在于减少不必要的 DOM 层级，从而提升渲染性能。

10. 使用 Custom Directives 自定义指令

Vue 3 允许开发者自定义指令，用于直接操作 DOM 元素。

import { directive } from 'vue';

const vFocus = {
  mounted(el) {
    el.focus();
  },
};

export default {
  directives: {
    focus: vFocus,
  },
};

使用示例

<input v-focus />

优势在于提供更灵活的 DOM 操作能力，适合实现特定功能（如自动聚焦、拖拽等）。

掌握这些技巧有助于构建现代化的 Vue 应用，提升代码质量和开发体验。