ref reactive torefs toref

ref、reactive、toRef和toRefs是Vue 3中的响应式API。它们用于在Vue组件中创建响应式数据。

1. ref：ref函数用于创建一个响应式的数据引用。它接收一个参数作为初始值，并返回一个包含value属性的对象。ref函数可以用于创建基本类型的响应式数据，例如数字、字符串等。

import { ref } from 'vue'

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

2. reactive：reactive函数用于创建一个响应式的对象。它接收一个普通对象作为参数，并返回一个代理对象，该代理对象会追踪对象的属性的变化。reactive函数可以用于创建复杂类型的响应式数据，例如对象、数组等。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

console.log(state.count) // 输出：0
console.log(state.message) // 输出：Hello

3. toRef：toRef函数用于创建一个响应式的引用。它接收两个参数：源响应式对象和属性名，并返回一个ref数据。toRef函数可以用于在组件中引用props的某个属性，并保持响应式连接。

import { defineComponent, toRef } from 'vue'

export default defineComponent({
  props: ['title'],
  setup(props) {
    const myTitle = toRef(props, 'title')
    console.log(myTitle.value)
  }
})

4. toRefs：toRefs函数用于将一个响应式对象转换为普通对象，其中每个属性都是一个ref数据。toRefs函数可以用于在组件中将响应式对象的属性解构为独立的ref数据。

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

const refs = toRefs(state)
console.log(refs.count.value) // 输出：0
console.log(refs.message.value) // 输出：Hello