Vue 响应式 API 的使用

响应式 API 是 Vue 提供的一组 API，用于创建响应式的数据。以下是响应式 API 的常见用法：

1. reactive 函数：

import { reactive } from 'vue'

const state = reactive({
    count: 0
})

reactive 函数用于将普通 JavaScript 对象转换为响应式对象，使得对象的属性可以被 Vue 追踪，当属性发生变化时，相关的视图会自动更新。

2. ref 函数：

import { ref } from 'vue'

const count = ref(0)

ref 函数用于创建一个包含响应式数据的引用对象，对 ref 创建的引用对象的值的修改会触发视图的更新。

3. computed 函数：

import { computed } from 'vue'

const doubleCount = computed(() => count.value * 2)

computed 函数用于创建一个计算属性，它会根据其依赖的响应式数据的变化自动重新计算。

4. watch 函数：

import { watch } from 'vue'

watch(() => count.value, (newValue, oldValue) => {
    console.log('count changed from', oldValue, 'to', newValue)
})

watch 函数用于监听响应式数据的变化，当数据发生变化时执行相应的回调函数。

5. toRefs 函数：

import { reactive, toRefs } from 'vue'

const state = reactive({
    count: 0
})

const { count } = toRefs(state)

toRefs 函数用于将响应式对象的属性转换为响应式引用，可以在组件的模板中使用解构赋值来解构响应式数据。

6. watchEffect 函数：

import { watchEffect } from 'vue'

watchEffect(() => {
    console.log('count is:', count.value)
})

watchEffect 函数用于创建一个副作用函数，它会自动追踪其依赖的响应式数据，并在数据变化时重新执行。

这些是 Vue 中响应式 API 的常见用法，它们可以帮助你轻松地实现数据的响应式更新和状态管理。