vue3中ref和reactive的区别

一、ref

ref : 接受一个内部值并返回一个响应式且可变的 ref 对象。其需要通过 .value 属性来读取/修改对象的值。ref传入的参数可以是一个具体的值，也可以是对象。

const bool = ref(false)
console.log(bool.value) // false
bool.value = true 
console.log(bool.value) // true
const applyList = ref([])
const arr = [1,2,3,4]
applyList.value = arr
console.log(applyList.value) // [1,2,3,4]
const obj = ref({})
const obj1 = {'name':'wmh','age':20}
obj.value = obj1
console.log(obj.value)//{'name':'wmh','age':20}

二、reactive

reactive : 创建一个响应式对象，与ref不同的是，reactive 接受的参数只能是一个对象，而且可以使用toRef(infoObj)为对象中的每一个属性创建一个ref, 它可以保持对原属性的响应式链接。reactive不需要通过.value去访问。

const obj = reactive({'name':'wmh','age':20})
console.log(obj)//{'name':'wmh','age':20}
const pager = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0,
    });
pager.total = 10
//不用通过pager.value.total来访问