1.toRef和toRefs

toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。
语法：const name = toRef(target,'propsName')
- 语法解析：target为目标响应对象，propsName为该响应对象当中的属性
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(target)
- 但是toRefs有一个缺点：他只能将第一层的属性解析成响应式
- 在setup()中可以用return { ...toRefs(object)}的方式，将整个响应式对象object的所有属性(第一层属性)提供给外部使用。

代码展示：

Demo组件当中:

<template>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<!-- 使用toRefs需要:job.j1.salary ,使用toRef只需要:salary-->
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<!-- 使用toRefs需要:job.j1.salary ,使用toRef只需要:salary-->
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	// 引入对应的api
	import {ref,reactive,toRef,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			const name1 = person.name//这里就相当于const name1 = '张三'
			console.log('返回非响应式属性',name1)//并非响应式的张三

			const name2 = toRef(person,'name')//返回响应式的属性
			console.log('toRef返回的响应式属性',name2)//这里的name属性是refimp对象

			const x = toRefs(person)//返回响应式的对象[对象的第一层属性]
			console.log('toRefs返回的响应式对象',x)

			//返回一个对象（常用）
			return {
				person,

				// 使用ref返回响应式属性(并非关联数据)
				name:ref(person.name),
				age:ref(person.age),
				salary:ref(person.job.j1.salary),

				// 使用toRef返回响应式属性
				name:toRef(person,'name'),
				age:toRef(person,'age'),
				salary:toRef(person.job.j1,'salary'),

				// 使用toRefs返回响应式对象(展开属性)
				// 使用es6语法展开
				...toRefs(person)
				// 切记:调用toRefs(target)只能将对象里面的第一层数据解析成响应式
				// 如果是多层次的对象后续在模板中调用还所需要嵌套.
			}
		}
	}
</script>