vue3学习 ref / reactive 让数据变成响应式数据

ref 函数 和 reactive 函数
这两个函数可以让一个原始数据(普通数据)变成响应式数据，但他们实现的原理方式不一样。

在vue3中你可以在setup中定义数据,但你定义的都是一个普通数据，当你对它进行修改时，它是视图没有发送变化，但实际上数据已经发生了变化。而ref和reactive就可以帮助你，将数据变成响应式数据

<div>我叫{{uName}}div><button @click="changeName">我要改名了button>

setup(){
	// 数据定义
	let name = ref('green')
	// 定义一个方法对名字进行修改
	function changeName(){
    	uName.value = 'red' // 在ref中定义的数据需要通过.value进行获取
	}
	return {name,changeName}
}

如果不使用ref,那么点击按钮时，视图时不会发生变化的

ref 适用于定义一些需要响应式的基本数据类型数据，如number,string等
reactive 用于定义复杂的数据类型，如数组，字典
① ref 后的数据会生成一个RefImpl实例对象,它的响应式原理是通过object.defineProperty 来实现数据劫持的，通过里面的get()和set()来实现响应式
② reactive 后的数据会生成一个Proxy实例对象（代理对象），他是通过proxy来实现数据的响应式。
③如果复杂数据类型使用ref绑定成响应式数据，在第一层会生成RefImpl实例对象，但是它的value是一个Proxy实例对象