Vue3中其他的Composition API详解

当提到 Vue3 中新增的 Composition API 时，通常大家第一个想到的是 setup 函数。但实际上，除了 setup 函数，Vue3 中还有许多其他非常实用的 Composition API。在这个完整攻略中，我们将对这些 Composition API 进行详细的解释和示例说明。

ref 和 toRef

ref 和 toRef 是 Vue3 中非常实用的两个 Composition API。通过使用 ref 和 toRef，我们可以将普通的 JavaScript 对象转化为响应式对象，从而实现数据的双向绑定。

ref

ref 可以将普通的 JavaScript 对象转化为响应式对象。下面是一个使用 ref 的例子：

import { ref } from 'vue'

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

count.value++
console.log(count.value) // 1

在上面的例子中，我们使用了 ref 创建了一个名为 count 的响应式对象。通过 count.value 可以访问这个对象的值。当我们对这个值进行修改时（例如 count.value++），Vue3 会自动更新对应的 DOM，从而实现数据的双向绑定。

toRef

除了 ref，Vue3 中还有一个非常实用的 Composition API，叫做 toRef。顾名思义，toRef 可以将一个普通的对象属性转化为响应式对象。下面是一个使用 toRef 的例子：

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0
})

const countRef = toRef(state, 'count')
console.log(countRef.value) // 0

state.count++
console.log(countRef.value) // 1

在上面的例子中，我们使用了 reactive 创建了一个响应式对象 state，其中包含一个名为 count 的属性。我们可以使用 toRef 将这个属性转化为一个响应式对象 countRef。使用方式和 ref 类似，只需要通过访问 countRef.value 来访问这个响应式对象的值即可。

watch 和 watchEffect

watch 和 watchEffect 是 Vue3 中非常强大的两个 Composition API。使用这两个函数可以帮助我们在数据发生变化时执行特定的操作，例如修改 DOM、发送网络请求等等。

watch

watch 可以监听一个响应式对象，并在这个对象发生变化时执行特定的操作。下面是一个使用 watch 的例子：

import { ref, watch } from 'vue'

const count = ref(0)

watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log(`count: ${oldValue} -> ${newValue}`)
  }
)

count.value++
// => count: 0 -> 1

在上面的例子中，我们使用 watch 监听了一个响应式对象 count。当这个对象发生变化时，我们执行了一个简单的 console.log 操作。

watchEffect

watchEffect 和 watch 类似，不同之处在于 watchEffect 不需要指定侦听的对象，而是直接读取诸如 ref ，reactive 等函数创建的响应式值，只要这些值被读取，它们就会自动侦听更新。

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(`count: ${state.count}`)
})

state.count++
// => count: 0
// => count: 1

在上面的例子中，我们使用了 watchEffect 监听了响应式对象 state 中的 count 属性。当这个对象发生变化时，我们执行了一个简单的 console.log 操作。

通过使用 watch 和 watchEffect，我们可以轻松地在数据发生变化时执行自定义的操作，从而实现复杂的业务逻辑。

以上是关于 Vue3 中其他的 Composition API 的详细讲解和示例说明。希望本文能够帮助大家更加深入地了解 Vue3 中的 Composition API。