Vue 3 常用编程技巧整理

它不一定比选项式 API 更'优雅'，但在逻辑复用和拆分复杂状态时，通常更省事。

3. watch 和 watchEffect 别混着用

这两个 API 都能响应变化，但适用场景不一样。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 适合深层传值

层层传 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 的改动挺实用，尤其是多绑定场景。以前这类需求常常要自己拼 props 和事件，现在直接写清楚就行。

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

这个改法最大的好处，是把双向绑定的意图写得更直白了。

8. defineComponent 对 TypeScript 友好一些

如果项目里用 TypeScript，defineComponent 基本是默认选项。它不负责魔法，只是让类型推断和编辑器提示更顺。

import { defineComponent, ref } from 'vue';

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

看起来只是包了一层，但在复杂组件里，类型能不能稳住，差别还是挺明显的。

9. Fragment 减少多余包裹节点

Vue 3 支持多根节点，这意味着很多时候不用为了模板结构去额外套一层 div。页面结构更干净，CSS 也少一点莫名其妙的干扰。

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

这不是性能优化的万能钥匙，但在语义和结构上都更顺手。

10. 自定义指令适合处理直接 DOM 操作

有些场景不值得单独封装成组件，直接用指令反而清楚，比如自动聚焦、权限控制、拖拽初始化这类小动作。

import { directive } from 'vue';

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

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

<input v-focus />

指令的边界也要收住。能用组件表达的复杂交互，别全靠指令硬拧。

结尾

这 10 个点里，真正常用的其实就那几类：响应式、逻辑组织、跨层通信和模板控制。Vue 3 的变化不只是 API 名字更新了一遍，很多地方是把以前'能做但不顺手'的事，改成了更自然的写法。项目写到后面，省下来的往往不是一行代码，而是调试和维护时少踩的坑。