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

这种方式让代码结构更清晰，尤其在处理复杂业务逻辑时，复用性更强。

3. 监听数据变化：watch 与 watchEffect

观察数据变动是常见需求。watch 可以精确指定监听源，支持深度监听和懒执行；watchEffect 则会自动追踪依赖，无需手动声明。

import { ref, watch, watchEffect } from 'vue';

const count = ref(0);

// 精确控制
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

// 自动追踪
watchEffect(() => {
  console.log(`count is now ${count.value}`);
});

如果不确定具体依赖项，或者希望立即执行一次，watchEffect 会更顺手。

4. 跨组件通信：provide 与 inject

在深层嵌套组件中，层层传递 props 非常繁琐。provide 和 inject 解决了这个问题，特别适合全局状态（如主题、用户信息）的共享。

// 父组件
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 };
  },
};

这种按需注入的方式减少了组件间的耦合度。

5. 任意位置挂载：Teleport

Teleport 允许将组件内容渲染到 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 可以在加载完成前显示占位内容，避免页面空白。

<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，支持多个绑定，并允许自定义事件名（如 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>

自定义组件端需配合相应的 props 和 emit 实现：

<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>

这为表单交互提供了更大的灵活性。

8. TypeScript 支持：defineComponent

使用 defineComponent 包裹组件定义，能获得更好的类型推断和 IDE 提示，特别适合 TypeScript 项目。

import { defineComponent, ref } from 'vue';

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

虽然不强制使用，但在大型项目中能显著减少类型错误。

9. 多根节点：Fragment

Vue 3 原生支持 Fragment，组件模板可以有多个根节点，无需额外的 <div> 包裹，从而减少不必要的 DOM 层级。

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

这有助于优化渲染性能。

10. 自定义指令

Vue 3 允许开发者自定义指令来操作 DOM，例如自动聚焦或拖拽功能。

import { directive } from 'vue';

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

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

使用时直接在元素上添加 v-focus 即可，提供了灵活的底层 DOM 操作能力。

以上 10 个技巧涵盖了从响应式基础到高级特性的核心用法。在实际项目中灵活运用这些模式，能让你的 Vue 3 应用更加健壮且易于维护。