* 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> ```