基礎型別的響應性 —— ref
在vue3裡面，我們可以通過 reactive 來實現引用型別的響應性，那麼基礎型別的響應性如何來實現呢？
可能你會想到這樣來實現：
const count = reactive({value: 0})
count.value += 1
這麼做確實可以實現，而且也很像 ref 的使用方式，都是要 .value 嘛。那麼 ref內部 是不是這麼實現的呢？
我們先定義兩個 ref 的例項並且列印看看。
const refCount = ref(0) // 基礎型別
console.log('refCount ', refCount )
const refObject = ref({ value: 0 }) // 引用型別
console.log('refObject ', refObject )
看一下結果：
我們都知道 reactive 是通過 ES6 的 Proxy 來實現的，基礎型別的 ref 顯然和 Proxy 沒啥關係，而引用型別的 ref 是先把原型變成 reactive， 然後再掛到 value 上面。
這樣看來，和我們的猜測不太一樣呢，那麼 ref 到底是如何實現的呢？我們可以看一下 ref 的原始碼。
ref 的原始碼
程式碼來自於 vue.global.js ，調整了一下先後順序。
function ref(value) {
return createRef(value);
}
function createRef(rawValue, shallow = false) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
class RefImpl {
constructor(_rawValue, _shallow = false) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this.__v_isRef = true;
this._value = _shallow ? _rawValue : convert(_rawValue); // 深層 ref or 淺層ref
}
get value() {
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
const convert = (val) => isObject(val) ? reactive(val) : val;
-
ref
這是我們使用的函式，裡面使用 createRef 來建立一個例項。 -
createRef
做一些基礎判斷，然後進入主題，正式建立ref。這裡還可以建立 shallowRef。 -
RefImpl
這個才是主體，顯然這是 ES6 的 class，constructor 是初始化函式，依據引數建立一個例項，並且設定例項的屬性。這個和上面 ref 的列印結果也是可以對應上的。
整個class的程式碼也是非常簡單，設定幾個“內部”屬性，記錄需要的資料，然後設定“外部”屬性 value，通過setter、getter 實現對 value 的操作攔截，set 裡面主要是 trigger 這個函式，由它呼叫模板的自動重新整理的功能。 -
convert
很顯然，判斷一下引數是不是 object，如果是的話，變成 reactive 的形式。
這個就可以解釋，引用型別的 ref 是如何實現響應性的，明顯是先變成 reactive，然後在掛到 value 上面（掛之前判斷一下是不是淺層的）。
ref 和 reactive 的關係
通過列印結果的對比以及分析原始碼可以發現：
- 基礎型別的 ref 和 reactive 沒有任何關係。
- 引用型別的 ref ，先把 object 變成 reactive ，即利用 reactive 來實現引用型別的響應性。
關係就是這樣的，千萬不要再混淆了。
shallowRef
淺層響應式，只監聽 .value 的變化，真簡單型別的響應式。
function shallowRef(value) {
return createRef(value, true); // true 淺層
}
通過原始碼我們可以發現，在把引用型別掛到 value 之前，先判斷一下是不是淺層的，如果是淺層的，並不會變成 reactive，而是直接把原來的物件掛在 value 上面，shallowRef 和 ref 的區別就在於這一點。
我們寫幾個例項看看效果：
setup () {
// 淺層的測試
// 基礎型別
const srefCount = shallowRef(0)
console.log('refCount ', srefCount )
// 引用型別
const srefObject = shallowRef({ value: 0 })
console.log('refObject ', srefObject )
// 巢狀物件
const srefObjectMore = shallowRef({ info: {a: 'jyk'} })
console.log('shallowRef ', srefObjectMore )
// reactive 的 shallowRef
const ret = reactive({name: 'jyk'})
const shallowRefRet = shallowRef(ret)
console.log('shallowRefRet ', shallowRefRet )
// ==================== 事件 ==================
// 修改基礎型別
const setNumber = () => {
srefCount.value = new Date().valueOf()
console.log('srefCount ', srefCount )
}
// 修改引用型別的屬性
const setObjectProp = () => {
srefObject.value.value = new Date().valueOf()
console.log('srefObject ', srefObject )
}
// 修改引用型別的value
const setObject = () => {
srefObject.value = { value: new Date().valueOf() }
console.log('srefObject ', srefObject )
}
// 修改巢狀引用型別的屬性
const setObjectMoreProp = () => {
srefObjectMore.value.info.a = new Date().valueOf()
console.log('srefObjectMore ', srefObjectMore )
}
// 修改巢狀引用型別的value
const setObjectMore = () => {
srefObjectMore.value = { qiantao: 1234567 }
console.log('srefObjectMore ', srefObjectMore )
}
// 修改reactive 的淺層ref
const setObjectreactive = () => {
shallowRefRet.value.name = '淺層的reactive'
console.log('shallowRefRet ', shallowRefRet )
}
}
看看結果：
測試了一下響應性：
- 基礎型別 srefCount 有響應性；
- 引用型別 srefObject 的屬性沒有響應性，但是直接修改 .value 是有響應性的。
- 巢狀的引用型別 srefObjectMore ，屬性和巢狀屬性都是沒有響應性的，但是直接修改 .value 是有響應性的。
- reactive 套上 shallowRef ，然後修改 shallowRef.value.屬性 = xxx ，也是可以響應的，所以淺層的ref 也不絕對，還要看內部結構。
triggerRef
手動執行與 shallowRef 關聯的任何效果。
官網的中文版裡面寫的很繞，其實就是 讓 shallowRef 原本不具有響應性的部分，具有響應性。
shallowRef 是淺層的，深層部分是沒有響應性的，那麼如果非得讓這部分也具有響應性呢？
這時候可以用 triggerRef 來實現。
好吧，目前還沒有想到有啥具體的應用場景，因為一般都直接簡單粗暴的用 ref 或者 reactive 了，全都自帶響應性。
測試了各種情況，發現 triggerRef 並不支援 shallowReactive，還以為能支援呢。（或許是我寫的測試程式碼有問題吧，官網也沒提 shallowReactive）
基於上面的例子，在適當的位置加上 triggerRef(xxx)就可以了。
setup () {
// 引用型別
const srefObject = shallowRef({ value: 0 })
// 巢狀物件
const srefObjectMore = shallowRef({ value: {a: 'jyk'} })
// reactive 的 shallowRef
const ret = reactive({name: 'reactive'})
const shallowRefRet = shallowRef(ret)
// 淺層的reactive
const myShallowReactive = shallowReactive({info:{name:'myShallowReactive'}})
const setsRet = () => {
myShallowReactive.info.name = new Date().valueOf()
triggerRef(myShallowReactive) // 修改後使用，不支援
}
// ==================== 事件 ==================
// 修改引用型別的屬性
const setObjectProp = () => {
srefObject.value.value = new Date().valueOf()
triggerRef(srefObject) // 修改後使用
}
// 修改引用型別的value
const setObject = () => {
srefObject.value = { value: new Date().valueOf() }
triggerRef(srefObject)
}
// 修改巢狀引用型別的屬性
const setObjectMoreProp = () => {
srefObjectMore.value.value.a = new Date().valueOf()
triggerRef(srefObjectMore)
}
// 修改巢狀引用型別的value
const setObjectMore = () => {
srefObjectMore.value.value = { value: new Date().valueOf() }
triggerRef(srefObjectMore)
}
// 修改reactive 的淺層ref
const setObjectreactive = () => {
shallowRefRet.value.name = '淺層的reactive' + new Date().valueOf()
triggerRef(shallowRefRet)
}
return {
srefObject, // 引用型別
srefObjectMore, // 巢狀引用型別
shallowRefRet, // reactive 的淺層ref
myShallowReactive, // 淺層的reactive
setsRet, // 修改淺層的reactive
setObjectProp, // 修改引用型別的屬性
setObject, // 修改引用型別的value
setObjectMoreProp, // 修改巢狀引用型別的屬性
setObjectMore, // 修改巢狀引用型別的value
setObjectreactive // 試一試reactive的淺層ref
}
}
深層部分，不使用 triggerRef 就不會重新整理模板，使用了 triggerRef 就可以重新整理模板。
話說，為啥會有這個函式？
isRef
通過 __v_isRef 屬性 判斷是否是 ref 的例項。這個沒啥好說的。
vue.global.js 原始碼：
function isRef(r) {
return Boolean(r && r.__v_isRef === true);
}
unref
- 使用.value的語法糖
unref 是一個語法糖，判斷是不是 ref 的，如果是則取.value，不是的話取原型。
vue.global.js 原始碼：
function unref(ref) {
return isRef(ref) ? ref.value : ref;
}
- unref 的用途
普通物件直接.屬性即可使用，但是 ref 卻需要.value才可以，混合使用的時候容易暈頭，尤其在函式內部接收引數的時候，無法確定傳入的是 reactive 還是 ref，如果每次都用 isReactive 或者 isRef 來判斷型別，然後決定是否用.value，那就太麻煩了。於是有了這個語法糖。
toRef 和 toRefs
toRef 可以用來為源響應式物件上的 property 性建立一個
ref。然後可以將 ref 傳遞出去，從而保持對其源 property 的響應式連線。
toRefs 將響應式物件轉換為普通物件，其中結果物件的每個 property 都是指向原始物件相應 property 的ref。
話說，官網的解釋為啥總是這麼令人費解呢？
我們還是先看看例子
setup () {
/**
* 定義 reactive
* 直接解構屬性，看響應性
* 使用toRef解構，看響應性
* 使用toRefs解構，看響應性
* 按鈕只修改reactive
*/
const person = reactive({
name: 'jyk',
age: 18
})
console.log('person ', person )
// 直接獲取屬性
const name = person.name
console.log('name ', name )
const refName = toRef(person, 'name')
console.log('refName ', refName )
const personToRefs = toRefs(person)
console.log('personToRefs ', personToRefs )
const update = () => {
// 修改原型
person.name = new Date()
}
return {
person, // reactive
name, // 獲取屬性
refName, // 使用toRef
personToRefs,
update // 修改屬性
}
}
當我們修改person的屬性值的時候，toRef 和 toRefs 的例項也會自動變化。而直接獲取的name屬性並不會變化。
toRef 就是想實現直接使用物件的屬性名，並且仍然享有響應性的目的。
toRef 就是對reactive 進行解構，然後仍然享有響應性的目的。
其實，說是變成了ref，但是我們看看列印結果就會發現，其實並不完全是ref。
看類名和屬性，toRef 和 ref 也是有區別的。
toRef 為啥可以響應
toRef 也是一個語法糖。
如果使用常規的方式對 reactive 進行解構的話就會發現，雖然解構成功了，但是也失去響應性（僅限於基礎型別的屬性，巢狀物件除外）。
那麼如何實現解構後還具有響應性呢？這時候就需要使用 toRef 了。
看上面那個例子，使用 refName 的時候，相當於使用 person['name']，這樣就具有響應性了。
你可能會問，就這？對就是這麼簡單，不信的話，我們來看看原始碼：
function toRef(object, key) {
return isRef(object[key])
? object[key]
: new ObjectRefImpl(object, key);
}
class ObjectRefImpl {
constructor(_object, _key) {
this._object = _object;
this._key = _key;
this.__v_isRef = true;
}
get value() {
return this._object[this._key]; // 相當於 person['name']
}
set value(newVal) {
this._object[this._key] = newVal;
}
}
看 get 部分，是不是 相當於 person['name'] ？
另外，雖然 toRef 看起來好像是變成了 ref，但是其實只是變成了 ref （RefImpl）的雙胞胎兄弟（ObjectRefImpl），並沒有變成 ref（RefImpl）。
ref 是 RefImpl， 而 toRef 是 ObjectRefImpl，這是兩個不同的class 。
toRef 可以看做是 ref 同系列的 class，後面還有一個同系列的。
toRefs
瞭解 toRef 之後，toRefs 就好理解了，從表面上看，可以把 reactive 的所有屬性都解構出來，從內部程式碼來看，就是把多個 toRef 放在了陣列（或者物件）裡面。
function toRefs(object) {
if ( !isProxy(object)) {
console.warn(`toRefs() expects a reactive object but received a plain one.`);
}
const ret = isArray(object) ? new Array(object.length) : {};
for (const key in object) {
ret[key] = toRef(object, key);
}
return ret;
}
customRef
自定義一個ref，並對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函式，該函式接收 track 和 trigger 函式作為引數，並應返回一個帶有 get 和 set 的物件。
如果上面那段沒看懂的話，可以跳過。
簡單的說，就是在 ref 原有的 set、get 的基礎上，加入我們自己寫的程式碼，以達到一定的目的。
話說，官網寫的例子還真是……
反正一開始我是沒看懂，後來又反覆看，又把程式碼敲出來執行，又查了一下“debounce”的意思。
最後終於明白了，這是一個防抖（延遲響應）的程式碼。
一般使用者在文字框裡輸入內容，立即就會響應，但是如果在查詢功能裡面的話就會有點小鬱悶。
使用者輸入個“1”，立即就去後端查詢“1”，
然後使用者又輸入個“2”，立即又去後端查詢“12”，
然後使用者又輸入個“3”，立即又去後端查詢“123”。
……
這個響應是很快，但是有點“折騰”的嫌疑，那麼能不能等使用者把“123”都輸入好了，再去後端查詢呢？
官網的例子就是實現這樣的功能的，我們把例子完善一下，就很明顯了。
const useDebouncedRef = (value, delay = 200) => {
let timeout
return customRef((track, trigger) => {
return {
get() {
track() // vue內部的跟蹤函式
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger() // vue內部的自動更新的函式。
}, delay) // 延遲時間
}
}
})
}
setup () {
const text = useDebouncedRef('hello', 1000) // 定義一個 v-model
console.log('customRef', text)
const update = () => {
// 修改後延遲重新整理
text.value = '1111' + new Date().valueOf()
}
return {
text,
update
}
}
customRef 物件：{{text}} <br><br>
<input v-model="text" type="text">
-
get
沒有改變，直接用原方法。 -
set
使用 setTimeout 實現延遲響應的功能，把 Vue 內部的 trigger() 放在 setTimeout 裡面就好。
這樣就可以了，延遲多長的時間可以自定義，這裡是一秒。一秒內使用者輸入的內容，會一次性更新，而不是每輸入一個字元就更新一次。
- v-model="text"
可以作為 v-model 來使用。
customRef 的 原始碼
我們再來看看 customRef 內部原始碼的實現方式。
function customRef(factory) {
return new CustomRefImpl(factory);
}
class CustomRefImpl {
constructor(factory) {
this.__v_isRef = true;
const { get, set } = factory(() => track(this, "get" /* GET */, 'value'), () => trigger(this, "set" /* SET */, 'value'));
this._get = get;
this._set = set;
}
get value() {
return this._get();
}
set value(newVal) {
this._set(newVal);
}
}
很簡單的是不是，就是先這樣，然後在那樣，最後就搞定了。
好吧，就是把 factory引數解構出來，分成set和get，做成內部函式，然後在內部的set和get裡面呼叫。
自定義 ref 的例項 —— 寫一個自己的計算屬性。
一提到計算屬性，我們會想到 Vue 提供的 computed，那麼如果讓我們使用自定義ref 來實現計算屬性的功能的話，要如何實現呢？（注意：只是練習用）
我們可以這樣來實現：
const myComputed = (_get, _set) => {
return customRef((track, trigger) => {
return {
get() {
track()
if (typeof _get === 'function') {
return _get()
} else {
console.warn(`沒有設定 get 方法`)
}
},
set(newValue) {
if (typeof _set === 'function') {
_set(newValue)
trigger()
} else {
console.warn(`沒有設定 set 方法`)
}
}
}
})
}
setup () {
const refCount = ref(0)
const myCom = myComputed(() => refCount.value + 1)
// const myCom = myComputed(() => refCount.value, (val) => { refCount.value = val})
const update = () => {
// 修改原型
refCount.value = 3
}
const setRef = () => {
// 直接賦值
refCount.value += 1
}
return {
refCount, // 基礎型別
myCom, // 引用型別
update, // 修改屬性
setRef // 直接設定
}
}
<div>
展示 自定義 的 customRef 實現計算屬性 <br>
ref 物件：{{refCount}} <br><br>
自定義的計算屬性 物件：{{myCom}} <br><br>
<input v-model="myCom" type="text">
<el-button @click="update" type="primary">修改屬性</el-button><br><br>
</div>
-
myComputed
首先定義一個函式，接收兩個引數，一個get，一個set。 -
customRef
返回一個 customRef 的例項，內部設定get 和 set。 -
呼叫方法
呼叫的時候，可以只傳入get函式，也可以傳入get、set兩個函式。
修改 refCount.value 的時候，v-model 的 myCom 也會發生變化。 -
實用性
那麼這種方式有啥使用效果呢？
在做元件的時候，元件的屬性props是不能直接用在內部元件的 v-model 裡面的，因為props只讀，那麼怎麼辦呢？
可以在元件內部設定一個ref，然後對props做監聽，或者用computed來做。
除了上面的幾種方法外，也可以用這裡的方法來實現，把 refCount 變成 props 的屬性就可以了，然後set裡面使用 smit 提交。
computed
寫完了自己的計算屬性後，我們還是來看看 Vue 提供的計算屬性。
程式碼來自於 vue.global.js ，調整了一下先後順序。
function computed(getterOrOptions) {
let getter;
let setter;
if (isFunction(getterOrOptions)) {
getter = getterOrOptions;
setter = () => {
console.warn('Write operation failed: computed value is readonly');
}
;
}
else {
getter = getterOrOptions.get;
setter = getterOrOptions.set;
}
return new ComputedRefImpl(getter, setter, isFunction(getterOrOptions) || !getterOrOptions.set);
}
class ComputedRefImpl {
constructor(getter, _setter, isReadonly) {
this._setter = _setter;
this._dirty = true;
this.__v_isRef = true;
this.effect = effect(getter, {
lazy: true,
scheduler: () => {
if (!this._dirty) {
this._dirty = true;
trigger(toRaw(this), "set" /* SET */, 'value');
}
}
});
this["__v_isReadonly" /* IS_READONLY */] = isReadonly;
}
get value() {
if (this._dirty) {
this._value = this.effect();
this._dirty = false;
}
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newValue) {
this._setter(newValue);
}
}
-
computed
暴露給我們用的方法，來定義一個計算屬性。只有一個引數，可以是一個函式（function），也可以是一個物件。內部會做一個判斷，然後做拆分。 -
ComputedRefImpl
是不是有點眼熟？這個是 ref 同款系列，都是 RefImpl 風格的，而且內部程式碼結構也很相似。
這個是computed 的主體類，也是先定義內部屬性，然後設定value的get和set。在get和set裡面，呼叫外部設定的函式。
原始碼：
https://gitee.com/naturefw/nf-vue-cdn/tree/master/cdn/project-compositionapi
線上演示：
https://naturefw.gitee.io/nf-vue-cdn/cdn/project-compositionapi/