* readonly 函數 * 深度只讀數據。 * 獲取一個對象 (響應式或純對象) 或 ref 并返回原始代理的只讀代理。 * 只讀代理是深層的：訪問的任何嵌套 property 也是只讀的。 * shallowReadonly 函數 * 淺只讀數據，只能使對象的第一層是只讀的，第2層及更深層不是只讀的。 * 創建一個代理，使其自身的 property 為只讀，但不執行嵌套對象的深度只讀轉換。 * 應用場景: * 在某些特定情況下，我們可能不希望對數據進行更新的操作，那就可以包裝生成一個只讀代理對象來讀取數據，而不能修改或刪除。 ```html <template> <!-- 4. 模板引用state --> <h3>state: {{ state }}</h3> <hr /> <button @click="update">更新</button> </template> <script lang="ts"> import { defineComponent, reactive, readonly, shallowReadonly } from "vue"; export default defineComponent({ setup() { //1. 創建一個響應式的對象 const state = reactive({ name: "張三", age: 20, car: { name: "奔馳", price: 100, }, }); //2. 將state分別傳入readonly和shallowReadonly //const readonely01 = readonly(state) const shallowReadonly01 = shallowReadonly(state); //3. 更新情況 const update = () => { //深度只讀，不能更新 //readonely01.age += 10 //readonely01.car.price += 10 //第1層的不能更改，更改失敗 //shallowReadonly01.age += 10 //淺度只讀，可以更改第2層及其更深層的數據 shallowReadonly01.car.price += 100; }; return { state, update, }; }, }); </script> ```