Vue3.x 自发布以来，凭借其性能的显著提升和更加灵活的组合式 API，已经成为了现代前端开发的重要工具之一。除了基本用法外，Vue3.x 还提供了许多高级功能，使得开发复杂应用变得更加简单和高效。 1. 使用 Composition API 创建复用逻辑Composition API 是 Vue3.x 中引入的一个重要特性，它允许开发者以更灵活的方式组织组件的逻辑。通过 setup 函数，我们可以定义组件的响应式状态、计算属性和方法，然后将它们返回给模板使用。更重要的是，Composition API 使得逻辑复用变得简单明了。通过自定义组合函数，我们可以将组件逻辑封装起来，并在多个组件间共享。这种方式不仅减少了代码的重复，也使得组件的维护和测试变得更加容易。 import { ref, onMounted } from 'vue';export function useFetchData(url) { const data = ref(null); const error = ref(null); onMounted(async () => { try { const response = await fetch(url); data.value = await response.json(); } catch (e) { error.value = e; } }); return { data, error };} 2. Teleport - 模态框的灵活运用在 Vue3.x 中，Teleport 提供了一种将子组件渲染到 DOM 树中任何位置的能力，这对于模态框、通知等需要脱离常规流的 UI 元素尤为有用。使用 Teleport，我们可以在组件内部定义模态框的内容，然后通过 to 属性指定模态框应该被渲染到的目标位置，如 body。这样，即使模态框在组件层级中被嵌套得很深，也能确保它被渲染在页面上的合适位置，避免了 CSS 样式冲突和层级问题。 这是一个模态框 3. 使用 Suspense 处理异步组件Suspense 是 Vue3.x 新增的一个组件，它专门用来处理异步组件的加载状态。在过去，我们需要在组件内部处理加载状态和错误状态，代码往往会因此变得复杂。而有了 Suspense，我们只需要将异步组件放在它的默认插槽中，然后通过 fallback 插槽定义加载过程中的回退内容。Suspense 自动检测异步依赖的解析过程，优雅地处理了加载状态，简化了异步组件的使用。 Loading... 4. 响应式 Refs 的结构赋值Vue3.x 的响应式系统允许我们通过结构赋值直接使用 ref 定义的响应式数据，同时保持其响应性。这一点在使用 Composition API 时尤其有用，因为我们经常需要从响应式对象中提取值。在 Vue3.x 中，即使经过结构赋值，这些值仍然是响应式的，这让状态管理变得更加灵活和直观。 import { ref, onMounted } from 'vue';const state = ref({ count: 0 });onMounted(() => { const { count } = toRefs(state.value); console.log(count.value); // 保持响应性}); 5. 使用 provide/inject 实现跨组件通信provide 和 inject API 为 Vue 应用中的跨组件通信提供了一种优雅的解决方案。通过这对 API，祖先组件可以定义可提供给其所有后代组件使用的数据或方法，而后代组件可以通过 inject 来接收这些数据或方法，无需通过每一层组件逐层传递。这对于开发深层嵌套的组件和高阶组件尤为重要，极大地提高了代码的可维护性和可读性。 // 父组件import { provide } from 'vue';export default { setup() { provide('message', '来自父组件的消息'); }}// 子组件import { inject } from 'vue';export default { setup() { const message = inject('message'); return { message }; }} 6. 自定义指令的使用Vue3.x 中的自定义指令 API 也得到了改进，使得创建和使用自定义指令变得更加灵活和强大。自定义指令允许我们封装可重用的 DOM 操作逻辑，如焦点管理、拖拽交互等。在 Vue3.x 中，自定义指令的生命周期钩子得到了扩展，我们可以更细致地控制指令的挂载、更新和卸载行为，为开发复杂的交互提供了更多可能性。 import { createApp, directive } from 'vue';const app = createApp({});app.directive('focus', { mounted(el) { el.focus(); }}); 7. 使用 watchEffect 进行副作用追踪watchEffect 是 Vue3.x 新增的 API，它自动追踪响应式依赖并执行副作用。与 watch API 相比，watchEffect 不需要显式声明侦听的数据源，它会自动收集副作用函数中涉及的所有响应式状态。这使得在需要根据多个数据变化执行操作时代码变得更加简洁。watchEffect 的自动依赖追踪也大大减少了副作用执行中潜在的遗漏或错误，使状态变化与副作用之间的联系更加紧密和可靠。 import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => console.log(count.value)); 结论Vue3.x 通过引入 Composition API、Teleport、Suspense 等强大的新特性和改进，为开发者提供了更多构建高效、响应式 Web 应用的工具和可能性。本文介绍的七个高级用法仅是 Vue3.x 丰富特性的冰山一角，深入掌握这些高级用法，将帮助前端开发者充分利用 Vue3.x 的强大能力，提升开发效率和应用性能。 作者：慕仲卿链接：https://juejin.cn/post/7341617121958576138