Vue3 为前端开发带来了诸多革新，它不仅提升了性能，还提供了更简洁、更强大的 API。

以下是十个最值得学习和使用的 Vue3 API，它们将助力你的开发工作迈向新高度。

浅层响应式 API：shallowRef

在 Vue3 中，shallowRef 是一个用于创建浅层响应式引用的工具。与普通的 ref 不同，shallowRef 只会追踪其引用值变化，而不会深入到对象的内部属性。

这在处理复杂对象时非常实用，尤其当你不需要对象内部属性具有响应性时，可以显著提升性能。

import { shallowRef } from 'vue';

const data = shallowRef({ name: 'Vue', version: 3 });

数据保护利器：readonly 和shallowReadonly

readonly 和 shallowReadonly 用于保护数据不被意外修改。readonly 会将一个响应式对象转换为完全只读的对象，任何修改操作都会报错。

而 shallowReadonly 则只将对象的顶层属性设置为只读，嵌套对象的属性仍可以被修改。

import { readonly, shallowReadonly, reactive } from 'vue';

const userData = reactive({ name: 'User', details: { job: 'Developer' } });
const lockedUserData = readonly(userData); // 完全只读
const shallowLockedData = shallowReadonly(userData); // 浅层只读

自动追踪依赖：watchEffect（含停止、暂停、恢复操作）

watchEffect 是一个强大的响应式 API，它可以自动追踪响应式数据的依赖，并在依赖变化时重新执行副作用函数。

与 watch 不同，它不需要显式指定依赖项，非常适合用于数据同步和副作用管理。

停止、暂停和恢复侦听器：

import { ref, watchEffect } from'vue';

const count = ref(0);
const { stop, pause, resume } = watchEffect(() => {
console.log('count changed:', count.value);
});

// 暂停侦听器
pause();

// 稍后恢复
resume();

// 停止侦听器
stop();

性能优化神器：v-memo

v-memo 是 Vue3 中用于优化列表渲染性能的指令。它允许你在模板中缓存列表项的渲染，只有当指定的依赖项发生变化时，才会重新渲染列表项。

这对于频繁更新的长列表来说，性能提升非常显著。

<template>
  <ul>
    <li v-for="item in list" :key="item.id" v-memo="[item.id, item.title]">
      {{ item.title }} - {{ item.content }}
    </li>
  </ul>
</template>

简化组件双向绑定：defineModel()

defineModel() 是 Vue3.4 中引入的一个新 API，旨在简化父子组件之间的双向绑定。

它允许组件直接操作父组件传递的 v-model 数据，而无需显式地定义 props 和 emits。

基本使用：

<!-- 父组件 -->
<template>
  <div>
    <CustomComponent v-model="userName" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomComponent from './CustomComponent.vue';

const userName = ref('前端开发爱好者');
</script>

<!-- 子组件 -->
<template>
  <input type="text" v-model="modelValue" />
</template>

<script setup>
const modelValue = defineModel();
</script>

带参数/定义多个 v-model：

<!-- 父组件 -->
<template>
  <div>
    <CustomComponent
      v-model="userName"
      v-model:title="title"
      v-model:subTitle="subTitle"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomComponent from './CustomComponent.vue';

const userName = ref('前端开发爱好者');
const title = ref('前端开发爱好者_title');
const subTitle = ref('前端开发爱好者_subTitle');
</script>

<!-- 子组件 -->
<template>
  <input type="text" v-model="modelValue" />
  <input type="text" v-model="title" />
  <input type="text" v-model="subTitle" />
</template>

<script setup>
const modelValue = defineModel();
const title = defineModel('title');
const subTitle = defineModel('subTitle');
</script>

顶层 await：简化异步操作

Vue3 支持顶层 await，这意味着你可以在模块顶层使用 await，而无需将其包裹在异步函数中。

这对于需要在模块加载时执行异步操作的场景非常有用。

<script setup>
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const data = await fetchData();
</script>

动态组件：< component >

动态组件是 Vue3 中用于动态渲染组件的标签，它允许你在同一个位置上加载不同的组件，从而提高用户体验。

基本用法

动态组件的核心是 <component> 标签和 is 特性。通过绑定 is 的值，可以动态渲染不同的组件。

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
};
</script>

高级用法：异步组件

异步组件是一种可以延迟加载组件的技术，可以提高性能。

<template>
  <div>
    <button @click="loadComponentA">Load Component A</button>
    <button @click="loadComponentB">Load Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref } from'vue';

const currentComponent = ref(null);

const loadComponentA = async () => {
const component = awaitimport('./ComponentA.vue');
  currentComponent.value = component.default;
};

const loadComponentB = async () => {
const component = awaitimport('./ComponentB.vue');
  currentComponent.value = component.default;
};
</script>

空间传送门：< Teleport >

<Teleport> 是 Vue3 中用于将组件的内容渲染到指定的 DOM 节点中的 API。

它可以帮助你解决弹窗、下拉菜单等组件的层级和样式问题。

<template>
  <button @click="showModal = true">Open Modal</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <h2>Modal</h2>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>

隐形容器：Fragment

Vue3 中的 Fragment 允许你在模板中没有根节点，减少多余的 DOM 节点，提升渲染性能。这对于列表组件来说非常有用。

<template>
  <template v-for="item in list" :key="item.id">
    <h2>{{ item.title }}</h2>
    <p>{{ item.content }}</p>
  </template>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([{ id: 1, title: 'Title 1', content: 'Content 1' }]);
</script>

自定义指令：封装可重用逻辑（v-debounce 实现）

自定义指令是 Vue3 中用于封装可重用逻辑的工具，例如防抖功能。

以下是如何创建一个防抖指令 v-debounce。

import { createApp } from'vue';

const app = createApp({});

// 注册自定义指令v-debounce
app.directive('debounce', {
  mounted(el, binding) {
    let timer;
    // 给 el 绑定事件，默认 click 事件
    el.addEventListener(binding.arg || 'click', () => {
      if (timer) {
        clearTimeout(timer);
      }
      // 回调函数延迟执行
      timer = setTimeout(() => {
        binding.value();
      }, binding.modifiers.time || 300);
    });
  }
});

app.mount('#app');

使用示例：

<template>
  <!-- 300毫秒内多次点击只会执行一次 -->
  <button v-debounce:click.time="500" @click="fetchData">请求数据</button>
</template>

<script setup>
import { ref } from 'vue';

const fetchData = () => {
      console.log('执行数据请求');
    };
</script>

Vue3 的这些强大 API 为开发者提供了更高效、更灵活的开发体验。

掌握这些工具，不仅能显著提升开发效率，还能让你的代码更加简洁和可维护。

在实际项目中，合理运用这些 API，将使你的应用性能更优、结构更清晰。无论是初学者还是有经验的开发者，都应深入学习这些特性，以充分利用 Vue3 的优势。