vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。

VUE3出现了很多新的API，下面是自己的一些理解进行的总结。
欢迎大家一起交流补充。

ref()

使用ref创建一个数据类型，ref有value这个属性

const name1 = { age: "14", name: "bob1" };
const name2 = ref({ name: "bob2" });    // 使用ref创建一个数据类型  相对于reactive，ref有value属性
name2.value = "bob3"
console.log(name1);   //  {age: '14', name: 'bob1'}  拷贝。不会影响原始数据

toRef()

针对对象内的单个属性进行转化

const name1 = { age: "14", name: "bob1" };
const name3 = toRef(name1, "age")   //针对对象内的单个属性
name3.value = "10"
console.log(name1); //{age: '10', name: 'bob1'}   引用，会影响原始数据

toRefs()

针对对象内的整个对象进行转化

const name1 = { age: "14", name: "bob1" };
const name4 = toRefs(name1)  //针对整个对象替换成ref对象
name4.name.value = "tom"
console.log(name1); //{age: '10', name: 'tom'}  引用，会影响原始数据

isRef()

判断该数据是否为ref创建的数据

let testObj = { name: "alex", age: "5" };
let testRefObj = ref({ name: "alex", age: "5" });
const testVal1 = isRef(testObj) ? "是ref创建的数据" : "不是ref创建的数据"
const testVal2 = isRef(testRefObj) ? "是ref创建的数据" : "不是ref创建的数据"
console.log(testVal1)  //不是ref创建的数据 
console.log(testVal2)  //是ref创建的数据

unref()

对ref内的值进行解析，
如果是ref则返回ref.value的值，不是则返回传入的对象

let testObj1 = { name: "alex", age: "5" };
let testRefObj2 = ref({ name: "alex", age: "5" });
const testVal3 = unref(testObj1)  //如果是ref则返回ref.value的值，不是则返回传入的对象
const testVal4 = unref(testRefObj2)//如果是ref则返回ref.value的值，不是则返回传入的对象
console.log(testVal3)  //Object {age: "5",name: "alex"}
console.log(testVal4)  //Proxy {name: 'alex', age: '5'}

reactive()

reactive 创建的响应式复杂数据对象，类似VUE2的data属性，
在对象属性发生变化时，模版是可以响应更新渲染的

<template>
    <div>
    	{{testReactive.nameTest}}   //jack2
    </div>
</template>


const testReactive = reactive({
	nameTest: "jack"
})
setTimeout(() => {
	testReactive.nameTest = "jack2"   //1秒钟后会更新渲染页面 
}, 1000)

ref和toRef区别:

ref->复制, 修改响应式数据不会影响原始数据
toRef->引用, 修改响应式数据会影响原始数据
ref->数据发生改变, 界面就会自动更新
toRef->数据发生改变, 界面也不会自动更新

ref和reactive区别:

ref->单一数据类型，有value属性；
reactive->复杂数据类型，无value属性；