返回

Composition API 外传：深入探索进阶技巧

前端

用 Reactive 还是 Ref？

在 Composition API 中，我们有两个选项来管理状态：reactive() 和 ref()。

  • reactive() ：创建一个响应式对象，其属性和嵌套对象的更改将触发视图重新渲染。
  • ref() ：创建一个可变的引用对象，其 value 属性的变化也会触发视图重新渲染。

一般来说，当我们需要一个响应式对象时，应该使用 reactive()。如果我们需要一个可变的引用对象，则应该使用 ref()。

V-if 和 V-for 的冲突

在 Vue.js 中，v-if 和 v-for 是两个非常有用的指令。然而，当它们一起使用时，可能会出现一些问题。

当使用 v-if 隐藏一个元素时，它将从 DOM 中移除。如果该元素包含 v-for，则 v-for 将无法正确迭代该元素。

要解决这个问题，我们可以使用 v-show 代替 v-if。v-show 不会从 DOM 中移除元素，它只是隐藏它。

生命周期钩子和 Async

Composition API 引入了新的生命周期钩子，如 onMounted 和 onUnmounted。这些钩子可以在组件挂载和卸载时执行异步操作。

例如，我们可以使用 onMounted 钩子在组件挂载后获取数据：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(async () => {
      const data = await fetch('/api/data')
      // 使用 data
    })
  }
}

高级用例

Composition API 还支持一些高级用例，例如：

  • 使用 provide 和 inject 在组件之间共享状态
  • 使用 toRefs 将响应式对象转换为引用对象
  • 使用 computed 创建响应式计算属性

总结

Composition API 为 Vue.js 开发者提供了强大的工具来管理状态和增强组件可重用性。通过掌握本指南中介绍的进阶技巧，开发者可以充分利用 Composition API，创建更高效、更易维护的应用程序。

参考：