一、reactive()

reactive() 函數(shù)用于返回一個(gè)對象的響應(yīng)式代理。與 ref() 函數(shù)定義響應(yīng)式數(shù)據(jù)的異同點(diǎn)如下：

數(shù)字化管理平臺
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
權(quán)限系統(tǒng)-商城
個(gè)人博客地址

• ref 函數(shù)和 reactive 函數(shù)都是用來定義響應(yīng)式數(shù)據(jù)的。

• ref 函數(shù)更適合定義基本數(shù)據(jù)類型（可接收基本數(shù)據(jù)類型和對象）

  • 函數(shù)參數(shù)可以是基本數(shù)據(jù)類型，也可以接受對象類型

  • 如果參數(shù)是對象類型時(shí)，其實(shí)底層的本質(zhì)還是 reactive，系統(tǒng)會自動給 ref 傳入的值進(jìn)行轉(zhuǎn)換

    ref(1) -> reactive({value:1})
    // ref函數(shù)只能操作淺層次的數(shù)據(jù)，把基本數(shù)據(jù)類型當(dāng)作自己的屬性值；深層次依賴于reactive
    

  • 在 template 中訪問，系統(tǒng)會自動添加 .value 。在 js 中需要手動 .value 進(jìn)行訪問

    import { ref } from 'vue'// 為基本數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
    const name = ref('Neo')// 為復(fù)雜數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
    const state = ref({count: 0
    })// 打印name的值
    console.log(name.value)
    // 打印count的值
    console.log(state.value.count)
    

  • ref 響應(yīng)式原理是依賴于Object.defineProperty()的get()和set()的

• reactive 函數(shù)更適合定義復(fù)雜的數(shù)據(jù)類型（json/arr/obj/map/set）

  • 它的響應(yīng)式是更加‘深層次’的（會影響對象內(nèi)部所有嵌套的屬性，所有的數(shù)據(jù)都是響應(yīng)式的），底層本質(zhì)是將傳入的數(shù)據(jù)包裝成一個(gè) JavaScript Proxy，其行為表現(xiàn)與一般對象相似。不同之處在于 Vue 能夠跟蹤對響應(yīng)式對象屬性的訪問與更改操作。因此不等于源對象，建議只使用響應(yīng)式代理，避免使用原始對象。

    import { reactive } from 'vue'let list = reactive([])
    const addData = () => {setTimeout(() => {let arr = ['banana','orange','peal']list.push(...arr)console.log(list)},1000)
    }
    

  • 參數(shù)必須是對象或者數(shù)組，如果要讓對象的某個(gè)元素實(shí)現(xiàn)響應(yīng)式時(shí)比較麻煩。需要使用 toRefs 函數(shù)處理

    import { reactive, toRefs } from 'vue'// 通過 reactive 定義響應(yīng)式數(shù)據(jù)
    const state = reactive({// 定義每一個(gè)表單控件的配置項(xiàng)：type類型、label文本、prop綁定字段 等信息items: [{label: "用戶名",prop: "name",inputwidth: "100%",}, {password: true,label: "密碼",prop: "pwd",inputwidth: "100%",rules: [{ required: true, message: "請輸入密碼", trigger: 'blur' }]}, {label: "手機(jī)號",prop: "phone",inputwidth: "100%",required: true,validateType: "phone"}],// 定義每一個(gè)表單綁定字段對應(yīng)的信息（form表單數(shù)據(jù)信息）formData: {name: "",pwd: "",phone: ""},// form 元素配置信息options: {size: "small",formWidth: "35%",//表單占父元素的寬度labelWidth: "80px",//標(biāo)簽的長度},
    })// 通過 toRefs 獲取 reactive 中的每一項(xiàng)屬性的引用（js中調(diào)用使用 .value，template 中直接使用自動解析）
    const { items, formData, options } = toRefs(state);console.log(items,options)
    

  • 獲取數(shù)據(jù)值的時(shí)候直接獲取，不需要加.value

    import { reactive } from 'vue'// 響應(yīng)式狀態(tài)
    const state = reactive({count: 0
    })// 打印count的值
    console.log(state.count)
    

二、readonly()

readonly() 函數(shù)接受一個(gè)對象 (不論是響應(yīng)式還是普通的) 或是一個(gè) ref，返回一個(gè)原值的只讀代理。本身不能去修改值，但受原始對象改變的影響。

import { readonly } from "vue"let obj = reactive({name:"Jack"})let readObj = readonly(obj)const change = () => {// 不能直接修改只讀屬性// readObj.name = "Lucy";// 受原始對象改變的影響obj.name = "David";console.log(obj,readObj);
}

只讀代理是深層的：對任何嵌套屬性的訪問都將是只讀的。它的 ref 解包行為與 reactive() 相同，但解包得到的值是只讀的。

三、shallowReactive()

reactive() 的淺層作用形式。和 reactive() 不同，這里沒有深層級的轉(zhuǎn)換：一個(gè)淺層響應(yīng)式對象里只有根級別的屬性是響應(yīng)式的。屬性的值會被原樣存儲和暴露，這也意味著值為 ref 的屬性不會被自動解包了。

import { reactive,shallowReactive } from "vue";const stu = reactive({name:"Jack"})const obj = shallowReactive({foo:{bar:{num:1}}
})const change = () => {// reactive() 作用是深層次的，和shallowReactive() 一起使用時(shí)，會影響其數(shù)據(jù)變化stu.name = "David"// shallowReactive() 作用是淺層的，只能修改第一層的數(shù)據(jù)。深層次數(shù)據(jù)無法修改。但是會受reactive數(shù)據(jù)修改的影響。obj.foo.bar.num = 1000;console.log(obj)
}

四、shallowReadonly()

readonly() 的淺層作用形式。和 readonly() 不同，這里沒有深層級的轉(zhuǎn)換：只有根層級的屬性變?yōu)榱酥蛔x。屬性的值都會被原樣存儲和暴露，這也意味著值為 ref 的屬性不會被自動解包了。同樣會受原始對象數(shù)據(jù)改變的影響。

const state = shallowReadonly({foo: 1,nested: {bar: 2}
})// 更改狀態(tài)自身的屬性會失敗
state.foo++// ...但可以更改下層嵌套對象
isReadonly(state.nested) // false// 這是可以通過的
state.nested.bar++

五、isReactive() 和 isReadonly()

• isReactive() 函數(shù)檢查一個(gè)對象是否是由 reactive() 或 shallowReactive() 創(chuàng)建的代理。
• isReadonly() 函數(shù)檢查傳入的值是否為只讀對象。只讀對象的屬性可以更改，但他們不能通過傳入的對象直接賦值。

數(shù)字化管理平臺
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
權(quán)限系統(tǒng)-商城
個(gè)人博客地址

六、toRef()

toRef() 函數(shù)基于響應(yīng)式對象上的一個(gè)屬性，創(chuàng)建一個(gè)對應(yīng)的 ref。這樣創(chuàng)建的 ref 與其源屬性保持同步：改變源屬性的值將更新 ref 的值，反之亦然。

toRef() 函數(shù)一次僅能設(shè)置一個(gè)數(shù)據(jù)，接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是哪個(gè)對象，第二個(gè)參數(shù)是對象的哪個(gè)屬性。

<script setup>const state = reactive({title: '標(biāo)題',name: 'wff'})const name = toRef(state, 'name')console.log(state.name)console.log(name.value)
</script><template><div>name:{{name}}</div>
</template>

七、toRefs()

toRefs() 函數(shù)將一個(gè)響應(yīng)式對象轉(zhuǎn)換為一個(gè)普通對象，這個(gè)普通對象的每個(gè)屬性都是指向源對象相應(yīng)屬性的 ref。

<script setup>const state = reactive({title: '標(biāo)題',name: 'wff'})const { title } = toRefs(state)console.log(state.title)console.log(title.value)
</script><template><div>title:{{title}}</div>
</template>

注：我們使用 reactive創(chuàng)建的對象，如果想在模板中使用，就必須得使用 xxx.xxx的形式；如果大量用到的話還是很麻煩的，但是使用 es6解構(gòu)以后，會失去響應(yīng)式。那么toRefs的作用就體現(xiàn)在這，利用toRefs可以將一個(gè)響應(yīng)式 reactive 對象的所有原始屬性轉(zhuǎn)換為響應(yīng)式的ref屬性。

八、toRaw()

toRaw() 函數(shù)可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 創(chuàng)建的代理對應(yīng)的原始對象（將響應(yīng)式對象轉(zhuǎn)化為普通對象）。

這是一個(gè)可以用于臨時(shí)讀取而不引起代理訪問/跟蹤開銷，或是寫入而不觸發(fā)更改的特殊方法。不建議保存對原始對象的持久引用，請謹(jǐn)慎使用。

const foo = {}
const reactiveFoo = reactive(foo)console.log(toRaw(reactiveFoo) === foo) // true

九、ref、toRef、toRefs 異同點(diǎn)

• ref、toRef、toRefs 函數(shù)都可以將某個(gè)對象中的屬性變成響應(yīng)式數(shù)據(jù)

• ref 函數(shù)的本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)，不會影響到原始數(shù)據(jù)（引用數(shù)據(jù)類型會有影響），視圖會更新

• toRef、toRefs 函數(shù)和傳入的數(shù)據(jù)形成引用關(guān)系，修改 toRef 會影響這些數(shù)據(jù)，但是不會更新視圖

  作用：把一個(gè)響應(yīng)式對象轉(zhuǎn)換成普通對象，該普通對象的每個(gè)屬性都是一個(gè) ref

  • toRef 函數(shù)一次僅能設(shè)置一個(gè)數(shù)據(jù)，接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是哪個(gè)對象，第二個(gè)參數(shù)是對象的哪個(gè)屬性
  • toRefs 函數(shù)接收一個(gè)對象作為參數(shù)，它會遍歷對象身上的所有屬性，然后挨個(gè)調(diào)用 toRef 執(zhí)行。用于批量設(shè)置多個(gè)數(shù)據(jù)為響應(yīng)式

• ref 數(shù)據(jù)會引起監(jiān)聽行為，而 toRef 不會