vue3的ref，unref，reactive，toRefs，toRef

ref函数，接受一个初始值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 value属性，指向该初始值

const count = ref(0)
console.log(count.value)    // 0

count.value++
console.log(count.value)   // 1

unref函数，参数是ref，则返回参数的value，否则直接返回参数本身

const count = ref(2)
unref(count)   // 2
const str = '111'
unref(str)     // '111'

reactive函数，返回普通对象的响应式副本
参数为需要定义为响应式数据的数据对象，可以理解为相当于vue2中的data

setup() {
	const data = reactive({
		name: 'zhangsan',
		age: 0
	})
	
	return {
		data            // 组件中使用data中的属性时需要使用data[key]的方式使用,例如组件中使用name应该写成data.name
	}
}

如果希望直接使用data中的属性，一般我们会用es6的解构赋值，但直接将data解构，那么data中的数据就不再具有响应式的特性

toRefs函数，将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property的ref，那么在将结果对象解构赋值的时候，属性的响应式特性会保留

setup() {
	const data = reactive({
		name: 'zhangsan',
		age: 0
	})
	
	return {
		...toRefs(data)            // 组件中可以直接使用data中的属性,且为响应式
	}
}

toRef函数
可以用来为源响应式对象上的某个 property 新创建一个 ref。ref 可以被传递，它会保持对其源 property 的响应式连接。

setup() {
	const data = reactive({
		num: 1
	})
	const count = toRef(data, 'num')
	const changeCount = () => {
		count.value += 1  
	}
	console.log(data.num)          //  2
	return {
		count      // 组件中可以直接使用count，且为响应式
	}
}