* reactive 與 ref 是 Vue3 的 composition API 中2個最重要的響應式 API * ref 用來處理基本類型數據，reactive 用來處理對象(遞歸深度響應式) * 如果用 ref 創建響應式的對象/數組，內部會自動將對象/數組轉換為 reactive 的代理對象 * ref 內部：通過給 value 屬性添加 getter/setter 來實現對數據的劫持 * reactive 內部：通過使用 Proxy 代理對象來實現對對象內部所有數據的劫持，并通過 Reflect 反射對象操作對象內部數據 * ref 的數據操作：在 js 中要`.value`調用，在模板中不需要(內部解析模板時會自動添加`.value`) ```html <template> <h3>m1: {{ m1 }}</h3> <h3>m2: {{ m2 }}</h3> <h3>m3: {{ m3 }}</h3> <button @click="update">更新數據</button> </template> <script lang="ts"> import { defineComponent, ref, reactive } from "vue"; export default defineComponent({ setup() { const m1 = ref("abc"); const m2 = reactive({ name: "小明", wife: { name: "小紅", }, }); //ref 傳遞的是一個對象 const m3 = ref({ name: "小明", wife: { name: "小紅", }, }); const update = () => { m1.value += "++"; m2.wife.name += "++"; m3.value.name += "++"; m3.value.wife.name += "++"; }; return { m1, m2, m3, update, }; }, }); </script> ``` 效果如下，可見通過`ref`也是可以創建一個響應式的對象的。