* toRaw 函數 * 將`reactive`或`readonly`返回的響應式代理對象轉換為普通對象。 * 這是一個還原方法，可用于臨時讀取，訪問不會被代理/跟蹤，寫入時也不會觸發界面更新。 * markRaw 函數 * 標記一個對象，使其永遠不會轉換為代理對象。返回對象本身。 * 應用場景: * 有些值不應被設置為響應式的，例如復雜的第三方類實例或 Vue 組件對象。 * 當渲染具有不可變數據源的大列表時，跳過代理轉換可以提高性能。 ```html <template> <h3>state: {{ state }}</h3> <hr /> <button @click="testToRaw">測試toRaw</button> <button @click="testMarkRaw">測試markRaw</button> </template> <script lang="ts"> import { defineComponent, reactive, toRaw, markRaw } from "vue"; export default defineComponent({ setup() { //1. reactive 函數返回普通對象的代理對象 const state = reactive<any>({ name: "小明", age: 20, }); //2. 將代理對象 state 轉換為普通對象 user //可以更改user對象，但是界面不會看到變化 const testToRaw = () => { const user = toRaw(state); user.age += 10; }; //3. 被 markRaw 標記 state.totals 屬性，從此以后 state.totals 不能再成為代理對象 //可以更改state.totals屬性，但是界面不會看到變化 //state的其他屬性不受到影響 const totals = [20]; state.totals = markRaw(totals); const testMarkRaw = () => { state.totals[0] += 10; //如果將state.totals屬性與沒有被markRaw標記的屬性放在一起更改，state.totals屬性也被更新 //在界面也會看到變化 //state.age += 10; }; return { state, testToRaw, testMarkRaw, }; }, }); </script> ```  界面不會看到任何變化。