* toRef 是一个函数。 * 作用：把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref * 应用：当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用 下面总结几种方式来实现：当数据发送变化时，界面也需要变化。 **1. `reactive`实现** ```html <template> <!-- 3. 在界面中应用 --> <h2>name: {{ user.name }}</h2> <h2>age: {{ user.age }}</h2> </template> <script lang="ts"> import { defineComponent, reactive } from "vue"; export default defineComponent({ setup() { //1. reactive定义一个响应式的对象 const user = reactive({ name: "张三", age: 20, }); //2. 定时器定时更新user.age属性 setInterval(() => { user.age += 10; }, 1000); return { user, }; }, }); </script> ```  <br/> **2. `toRefs`实现：写法一** ```html <template> <!-- 5. 在界面中可以直接写属性名调用 --> <h2>name: {{ name }}</h2> <h2>age: {{ age }}</h2> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from "vue"; export default defineComponent({ setup() { //1. reactive定义一个响应式的对象 const user = reactive({ name: "张三", age: 20, }); //2. toRefs将响应式的对象转换为普通对象，该普通对象的每个属性都是一个Ref对象 const user2 = toRefs(user); //3. 定时器定时更新user2.age属性 setInterval(() => { user2.age.value += 10; }, 1000); return { //4. ...user2返回 ...user2, }; }, }); </script> ```  <br/> **3. `toRefs`实现：写法二** ```html <template> <!-- 5. 在界面中可以直接调用 --> <h2>name: {{ name }}</h2> <h2>age: {{ age }}</h2> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from "vue"; export default defineComponent({ setup() { //1. reactive定义一个响应式的对象 const user = reactive({ name: "张三", age: 20, }); //2. toRefs将响应式的对象转换为普通对象，该普通对象的每个属性都是一个Ref对象 const { name, age } = toRefs(user); //3. 定时器定时更新age属性 setInterval(() => { age.value += 10; }, 1000); return { //4. 直接返回属性名 name, age, }; }, }); </script> ```  <br/> **4. `toRefs`实现：写法三** ```html <template> <!-- 7. 在界面中可以直接调用 --> <h2>name: {{ name }}</h2> <h2>age: {{ age }}</h2> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from "vue"; //1. 在defineComponent外定义函数 function useFeature() { //2. reactive定义一个响应式的对象 const user = reactive({ name: "张三", age: 20, }); return { //3. 以...toRefs将响应式对象转换为普通对象并返回 ...toRefs(user), }; } export default defineComponent({ setup() { //4. 调用外面的函数useFeature const { name, age } = useFeature(); //5. 定时器定时更新age属性 setInterval(() => { age.value += 10; }, 1000); return { //6. 直接返回属性名 name, age, }; }, }); </script> ```