vue 中 ref和reactive的对比

1.定义数据类型不同

ref通常用来定义基本数据类型 比如string、number、boolean等。当然了也可以用来定义对象类型。

reactive通常用来定义对象类型，数组和对象。

2.取值方式不同

ref取值需要通过.value来取值，ref返回的是带有.value参数的对象。这个.value属性包含了实际的响应式值。

reactive 不需要通过.value来取值，reactive直接返回响应式对象的引用。处理复杂数据结构时更加便捷和高效。

//ref
import {ref} from 'vue'

//定义
const count = ref(0)

//取值
count.value

//设值
count.value++

----
//reactive
import {reactive} from 'vue'

//定义数组
const myArray = reactive([1,2,3])

//定义对象
const myObject = reactive({
    room:{
        number:1
    }
})

//数组取值
console.log(myArray[0])

//对象取值
console.log(myObject.room.number)