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

Vue 3 带来了许多激动人心的新特性，让前端开发变得更加灵活和高效。在实际项目中，掌握这些核心技巧能显著提升代码质量和开发效率。

响应式数据管理

Vue 3 引入了 ref 和 reactive 来管理状态。ref 适合基本类型，返回包含 value 的对象；而 reactive 则用于对象或数组的深层代理。使用时要注意，访问 ref 定义的值需要加 .value，但模板中会自动解包。对于复杂数据结构，优先选择 reactive 可以避免频繁的点操作。

import { ref, reactive } from 'vue';

const count = ref(0);
console.log(count.value); // 0

const state = reactive({
  name: 'Vue 3',
  version: '3.2.0',
});
console.log(state.name); // Vue 3

组合式 API 的优势

相比选项式 API，组合式 API 允许将逻辑封装成可复用的函数。通过 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, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

watchEffect(() => {
  console.log(`count is now ${count.value}`);
});

跨组件通信

在深层嵌套组件中传递 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 };
  },
};

Teleport 与 Suspense

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>

异步加载方面，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>

v-model 与 TypeScript 支持

Vue 3 改进了 v-model，支持多个绑定，并通过 modelValue 和 update:modelValue 自定义逻辑。配合 defineComponent 使用，能获得更好的 TypeScript 类型推断和代码提示。

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

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

Fragment 与自定义指令

多根节点（Fragment）功能减少了不必要的 DOM 包裹层，提升了渲染性能。此外，自定义指令提供了直接操作 DOM 的能力，适合实现自动聚焦、拖拽等特定功能。

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

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

掌握这些技巧后，构建现代化 Vue 应用将更加得心应手。无论是状态管理、组件通信还是性能优化，Vue 3 都提供了更强大的工具链，帮助开发者写出更清晰、类型安全且高效的代码。