一、reactive
reactive 用于為對(duì)象添加響應(yīng)式狀態(tài)质礼。接收一個(gè)js對(duì)象作為參數(shù)旺聚，返回一個(gè)具有響應(yīng)式狀態(tài)的副本。
獲取數(shù)據(jù)值的時(shí)候直接獲取眶蕉，不需要加.value
參數(shù)只能傳入對(duì)象類型
import { reactive } from 'vue'
// 響應(yīng)式狀態(tài)
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
二砰粹、ref
ref 用于為數(shù)據(jù)添加響應(yīng)式狀態(tài)。由于reactive只能傳入對(duì)象類型的參數(shù)造挽，而對(duì)于基本數(shù)據(jù)類型要添加響應(yīng)式狀態(tài)就只能用ref了碱璃，同樣返回一個(gè)具有響應(yīng)式狀態(tài)的副本。
獲取數(shù)據(jù)值的時(shí)候需要加.value饭入∏镀鳎可以理解為ref是通過reactive包裝了一層具有value屬性的對(duì)象實(shí)現(xiàn)的
參數(shù)可以傳遞任意數(shù)據(jù)類型，傳遞對(duì)象類型時(shí)也能保持深度響應(yīng)式谐丢，所以適用性更廣爽航。
vue 3.0 setup里定義數(shù)據(jù)時(shí)推薦優(yōu)先使用ref，方便邏輯拆分和業(yè)務(wù)解耦乾忱。
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)
三讥珍、toRef
toRef 用于為源響應(yīng)式對(duì)象上的屬性新建一個(gè)ref，從而保持對(duì)其源對(duì)象屬性的響應(yīng)式連接窄瘟。接收兩個(gè)參數(shù)：源響應(yīng)式對(duì)象和屬性名衷佃，返回一個(gè)ref數(shù)據(jù)。例如使用父組件傳遞的props數(shù)據(jù)時(shí)寞肖，要引用props的某個(gè)屬性且要保持響應(yīng)式連接時(shí)就很有用纲酗。
獲取數(shù)據(jù)值的時(shí)候需要加.value
toRef后的ref數(shù)據(jù)不是原始數(shù)據(jù)的拷貝，而是引用新蟆，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?shù)據(jù)
import { defineComponent, toRef } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 創(chuàng)建變量myTitle
const myTitle = toRef(props, 'title')
console.log(myTitle.value)
}
})
四觅赊、toRefs
toRefs 用于將響應(yīng)式對(duì)象轉(zhuǎn)換為結(jié)果對(duì)象，其中結(jié)果對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的ref琼稻。常用于es6的解構(gòu)賦值操作吮螺，因?yàn)樵趯?duì)一個(gè)響應(yīng)式對(duì)象直接解構(gòu)時(shí)解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式，而使用toRefs可以方便解決這一問題。
獲取數(shù)據(jù)值的時(shí)候需要加.value
toRefs后的ref數(shù)據(jù)不是原始數(shù)據(jù)的拷貝鸠补，而是引用萝风，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?shù)據(jù)
作用其實(shí)和 toRef 類似，只不過 toRef 是一個(gè)個(gè)手動(dòng)賦值紫岩，而 toRefs 是自動(dòng)賦值规惰。
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 使用了解構(gòu)賦值語法創(chuàng)建了變量myTitle
const { myTitle } = toRefs(props)
console.log(myTitle.value)
}
})
五、customRef
(1)customRef 用于自定義返回一個(gè)ref對(duì)象,可以顯式地控制依賴追蹤和觸發(fā)響應(yīng),接受工廠函數(shù)
(2)兩個(gè)參數(shù)分別是用于追蹤的 track 與用于觸發(fā)響應(yīng)的 trigger泉蝌，并返回一個(gè)一個(gè)帶有 get 和 set 屬性的對(duì)象
使用:
import {customRef} from 'vue';
function useDebouncedRef(value) {
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
value2=newValue
trigger()
},
}
})
}
```
通過customRef返回的ref對(duì)象,和正常ref對(duì)象一樣,通過x.value修改或讀取值
