Vue3的toRef和toRefs

1. toRef函数是创建一个引用实现对象（ObjectRefImpl），并将它指向另一个对象中的某个属性

   <template>
   	<p>{{name}}p>
   	<p>{{city}}p>
   	<button @click="name + '~'">更改姓名button> 
   	<button @click="city + '~'">更改城市button>
   template>
   

   <script>
   import { reactive, toRef } from 'vue'; 
   export default {
   	setup() {
   		let person = reactive({
   			name: 'wu',
   			job: {
   				city: 'tj'
   			}
   		});
   		return {
   			name: toRef(person, name),
   			city: toRef(person.job, city)
   		};
   	}
   }
   </script>
   

2. toRefs是批量操作

   <template>
   	<p>{{name}}p>
   	<p>{{job.city}}p>
   	<button @click="name + '~'">更改姓名button> 
   	<button @click="job.city + '~'">更改城市button>
   template>
   

   <script>
   import { reactive, toRefs } from 'vue'; 
   export default {
   	setup() {
   		let person = reactive({
   			name: 'wu',
   			job: {
   				city: 'tj'
   			}
   		});
   		return {
   			...toRefs(person)
   		};
   	}
   }
   </script>