vue3 ref和reactive的用法

Vue3中的ref和reactive是Composition API中的两个基本函数。

ref函数用于创建响应式数据，它返回一个包含value属性的对象。这个value属性是可变的，并且可以通过赋值改变其值。ref函数一般用于创建简单数据类型的响应式数据，例如数字、字符串等。

示例代码：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 输出0

count.value++

console.log(count.value) // 输出1

reactive函数则用于创建复杂数据类型的响应式数据，例如对象、数组等。它会对传入的对象进行递归地响应式化处理，然后返回一个响应式代理对象。这个代理对象和原始对象具有相同的结构，但是每个属性都是响应式的。

示例代码：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello World',
  list: [1, 2, 3]
})

console.log(state.count) // 输出0

state.count++

console.log(state.count) // 输出1

总的来说，ref和reactive都是用于创建响应式数据的函数，但ref更适合创建简单数据类型的响应式数据，而reactive则更适合创建复杂数据类型的响应式数据。在使用时，需要根据实际情况选择使用哪一个函数。