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

这种写法在大型组件中优势明显，逻辑复用性更强，代码结构也更清晰。

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

处理副作用时，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

深层嵌套组件传值很麻烦，provide 和 inject 能解决'祖先组件向后代传递数据'的问题，避免层层 props 透传。

// 父组件
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：组件挂载到任意位置

有时候我们需要把模态框、通知栏渲染到 body 下，而不是当前组件内部。Teleport 就是干这个的，解决了层级和样式隔离问题。

<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。自定义组件时可以通过 defineModel 简化语法（此处展示基础用法）。

<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 实现多模型绑定。

8. defineComponent：TypeScript 支持

虽然 Vue 3 本身对 TS 友好，但使用 defineComponent 包裹组件定义能获得更好的类型推断和 IDE 提示，推荐在 TS 项目中使用。

import { defineComponent, ref } from 'vue';

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

9. Fragment：减少 DOM 元素

Vue 3 支持多根节点组件，不再强制要求单个根元素。这减少了不必要的 wrapper div，优化了 DOM 结构和渲染性能。

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

10. 自定义指令：扩展 DOM 能力

当内置指令不够用时，可以注册自定义指令来操作原生 DOM，比如自动聚焦、拖拽等。

import { directive } from 'vue';
const vFocus = {
  mounted(el) {
    el.focus();
  },
};
export default {
  directives: {
    focus: vFocus,
  },
};

使用示例：<input v-focus />

这些只是基础，实际项目中往往需要组合使用。关键是理解背后的响应式原理，而不是死记 API。掌握这些技巧能显著提升代码可维护性与开发体验。