* 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> ```  界面不会看到任何变化。