vue3中ref、reactive、toRef、toRefs区别

简单描述vue3中ref、reactive、toRef、toRefs区别

ref:ref用于创建基础数据类型的响应式变量（采用复制的方式，修改响应式数据不会影响原始数据，数据发生改变，界面就会自动更新）

setup(){
	const refA = ref(0)
}

reactive:reactive用于创建引用类型的响应式对象

setup(){
	const refA = reactive({
		name: "LISA",
		age: "36"
	})
}

toRef: toRef接收两个参数target和attr，target是对象，attr是对象的属性，返回响应式变量（采用引用的方式，修改响应式数据，会影响原始数据，并且数据发生改变，界面也会更新）

setup(){
	const object = { name: "LISA", age: "36" }
	const refA = toRef(object, name) 
}

toRefs: 将响应式对象转换为普通对象，多用于响应式对象转为普通对象后解构（对象中的数据依旧是响应式）

setup(){
	const refA = reactive({
		name: "LISA",
		age: "36"
	})
	return{
		...toRefs(refA) 
	}
}