Vue3 响应数据简易实现：Composition API (reactive、ref、toRef...)

2023-10-03 12:29:09

Vue3 中的响应式系统

在 Vue3 中，响应式系统是一个核心的概念，它允许您在应用程序的数据和视图之间建立连接，当数据发生变化时，视图会自动更新，而无需您手动操作。

在 Vue2 中，响应式数据通常通过使用 data 选项来定义，但这种方式在某些场景下会存在局限性，例如，当您需要在组件内动态创建响应式数据时，或者您需要在多个组件之间共享响应式数据时，使用 data 选项就显得不够灵活了。

为了解决这些问题，Vue3 引入了 Composition API，它提供了一种新的方式来管理响应式数据，Composition API 的核心思想是将响应式数据与组件的逻辑分离，这样您就可以在需要的时候创建和使用响应式数据，而无需修改组件的结构。

Composition API 中的响应式 API

Composition API 中提供了三种主要的响应式 API：reactive、ref 和 toRef，它们分别用于创建响应式对象、创建响应式引用和将普通值转换为响应式值。

1. reactive

reactive 函数用于将一个普通对象转换为响应式对象，当响应式对象的属性发生变化时，视图会自动更新。

const person = reactive({
  name: 'John Doe',
  age: 30
})

person.name = 'Jane Doe' // 视图自动更新

2. ref

ref 函数用于创建一个响应式引用，响应式引用可以指向任何值，包括普通值、响应式对象和组件实例。

const name = ref('John Doe')

name.value = 'Jane Doe' // 视图自动更新

3. toRef

toRef 函数用于将一个普通值转换为响应式值，当普通值发生变化时，响应式值也会自动更新。

const name = 'John Doe'

const reactiveName = toRef(name)

reactiveName.value = 'Jane Doe' // 视图自动更新

使用 Composition API 来管理响应式数据

Composition API 为您提供了灵活的方式来管理响应式数据，您可以根据自己的需要选择使用 reactive、ref 和 toRef API。

以下是一些使用 Composition API 管理响应式数据的常见场景：

在组件内动态创建响应式数据：

const { reactive } = Vue

const component = {
  setup() {
    const person = reactive({
      name: 'John Doe',
      age: 30
    })

    return {
      person
    }
  }
}

在多个组件之间共享响应式数据：

const { reactive } = Vue

const store = reactive({
  user: {
    name: 'John Doe',
    age: 30
  }
})

const componentA = {
  setup() {
    return {
      user: store.user
    }
  }
}

const componentB = {
  setup() {
    return {
      user: store.user
    }
  }
}