您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue Ref全家桶怎么使用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
在Vue3中,ref
成為了一個(gè)全家桶,除了用于創(chuàng)建響應(yīng)式數(shù)據(jù)之外,還可以用于引用DOM元素、組件實(shí)例和其他對(duì)象。以下是ref
的具體用法:
我們可以使用ref
函數(shù)來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù),例如:
<template> <div>{{ count }}</div> </template> <script setup lang="ts"> import { ref } from 'vue' const count = ref(0) console.log(count.value) // 輸出 0 count.value += 1 console.log(count.value) // 輸出 1 </script> <style scoped> </style>
注意被ref包裝之后需要.value 來(lái)進(jìn)行賦值
在這個(gè)例子中,我們使用ref
函數(shù)來(lái)創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)count
,初始值為0
。我們可以使用count.value
來(lái)訪問(wèn)和修改這個(gè)值。
我們可以使用ref
函數(shù)來(lái)引用DOM元素,例如:
<template> <div ref="container"></div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' const container = ref(null) // 注意:此處的變量名必須和標(biāo)簽上的屬性名一致 onMounted(() => { console.log(container.value) // 輸出 <div></div> }) </script> <style scoped> </style>
在這個(gè)例子中,我們使用ref
函數(shù)來(lái)創(chuàng)建一個(gè)container
引用,然后在模板中使用ref="container"
來(lái)將這個(gè)引用綁定到一個(gè)<div>
元素上。在setup
函數(shù)中,我們使用onMounted
鉤子來(lái)訪問(wèn)這個(gè)引用的值。
我們可以使用ref
函數(shù)來(lái)引用組件實(shí)例,例如:
<template> <Child ref="child" /> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './Child.vue' const child = ref(null) </script> <style scoped> </style>
在這個(gè)例子中,我們使用ref
函數(shù)來(lái)創(chuàng)建一個(gè)child
引用,然后將這個(gè)引用綁定到一個(gè)<Child>
組件上。在script
中,我們將這個(gè)引用暴露出去,以便在其他地方使用。
除了DOM元素和組件實(shí)例之外,我們還可以使用ref
函數(shù)來(lái)引用其他對(duì)象,例如:
<template> <Child ref="child" /> </template> <script setup lang="ts"> import { ref } from 'vue' const data = { name: 'John' } const obj = ref(data) console.log(obj.value.name) // 輸出 'John' obj.value.name = 'Mary' console.log(data.name) // 輸出 'Mary' <script> <style scoped> </style>
在這個(gè)例子中,我們使用ref
函數(shù)來(lái)引用一個(gè)對(duì)象data
,然后將這個(gè)引用賦值給一個(gè)obj
變量。我們可以使用obj.value
來(lái)訪問(wèn)和修改這個(gè)對(duì)象。在這個(gè)例子中,我們將obj.value.name
修改為Mary
,然后發(fā)現(xiàn)data.name
也被修改了。
在Vue3中,ref函數(shù)的源碼如下:
import { isObject } from '@vue/shared' import { ReactiveFlags, reactive } from './reactive' export function ref(value) { // 如果value已經(jīng)是一個(gè)ref對(duì)象,直接返回它 if (isRef(value)) { return value } // 創(chuàng)建一個(gè)響應(yīng)式對(duì)象 let valueIsObject = isObject(value) const ref = { // 標(biāo)記這個(gè)對(duì)象是一個(gè)ref對(duì)象 [ReactiveFlags.IS_REF]: true, // 獲取ref的值 get value() { // 如果value是一個(gè)對(duì)象,則返回一個(gè)響應(yīng)式對(duì)象 if (valueIsObject) { return reactive(value) } return value }, // 設(shè)置ref的值 set value(newVal) { if (valueIsObject) { value = newVal valueIsObject = isObject(newVal) return } // 如果value是一個(gè)基本類型的值,則直接修改它 value = newVal } } return ref }
在這個(gè)源碼中,ref
函數(shù)首先會(huì)判斷傳入的值是否已經(jīng)是一個(gè)ref
對(duì)象,如果是則直接返回它,否則會(huì)創(chuàng)建一個(gè)響應(yīng)式對(duì)象來(lái)作為ref
對(duì)象的值。然后ref
函數(shù)會(huì)返回一個(gè)擁有value
屬性的對(duì)象,當(dāng)讀取這個(gè)屬性時(shí),如果它的值是一個(gè)對(duì)象,則會(huì)返回一個(gè)響應(yīng)式對(duì)象,否則直接返回它的值;當(dāng)修改這個(gè)屬性時(shí),如果它的值是一個(gè)對(duì)象,則會(huì)將新值轉(zhuǎn)化為響應(yīng)式對(duì)象,否則直接修改它的值。
在Vue3中,isRef
函數(shù)用于判斷一個(gè)對(duì)象是否為ref
對(duì)象,它通過(guò)判斷這個(gè)對(duì)象是否擁有一個(gè)特殊的屬性IS_REF
來(lái)進(jìn)行判斷。這個(gè)特殊屬性的值為true
,表示這個(gè)對(duì)象是一個(gè)ref
對(duì)象。
<template> <div class="wrapper"></div> </template> <script setup lang="ts"> import { isRef, ref } from 'vue'; const name: string = '張三'; console.log(isRef(name)); // false const age = ref(10); console.log(isRef(age)); // true </script> <style scoped> </style>
// 判斷一個(gè)對(duì)象是否為ref對(duì)象 export function isRef(r) { return Boolean(r && r[ReactiveFlags.IS_REF]) }
在Vue3中shallowRef
函數(shù),用于創(chuàng)建一個(gè)“淺層”的響應(yīng)式對(duì)象。
與ref
函數(shù)不同的是,shallowRef
函數(shù)不會(huì)將其值轉(zhuǎn)化為響應(yīng)式對(duì)象,而是直接將其作為普通的對(duì)象或數(shù)組來(lái)處理。這意味著,當(dāng)修改shallowRef
對(duì)象的屬性或數(shù)組的元素時(shí),Vue3將不會(huì)追蹤這些變化。這種“淺層”的響應(yīng)式對(duì)象對(duì)于一些不需要完全響應(yīng)式的場(chǎng)景非常有用,例如緩存一些數(shù)據(jù)或跟蹤某些狀態(tài)。
下面是一個(gè)使用shallowRef
函數(shù)的示例:
<template> <div>{{ obj.name }}</div> </template> <script setup lang="ts"> import { shallowRef } from 'vue' const obj = { name: 'John', age: 30 } const ref = shallowRef(obj) console.log(ref.value.name) // 輸出 'John' ref.value.name = 'Mary' console.log(obj.name) // 輸出 'Mary' </script> <style scoped> </style>
在這個(gè)示例中,我們使用shallowRef
函數(shù)來(lái)創(chuàng)建一個(gè)“淺層”
的響應(yīng)式對(duì)象ref
,并將其值設(shè)置為obj
對(duì)象。當(dāng)我們修改ref.value.name
屬性的值時(shí),obj.name
屬性的值也發(fā)生了改變。這是因?yàn)?code>obj對(duì)象和ref
對(duì)象共享同一個(gè)引用。
在Vue3中,shallowRef
函數(shù)的源碼如下:
import { isObject, toRawType } from '@vue/shared' import { track, trigger } from './effect' import { ReactiveFlags } from './reactive' const shallowGet = (value) => value const shallowSet = () => { console.warn( `Value assigned to a shallow ref ${String(value)} is not reactive, ` + `expecting explicitly passing deep: true in ref() options` ) } class ShallowRefImpl { public readonly __v_isRef = true public readonly [ReactiveFlags.IS_SHALLOW] = true constructor(public _value) {} get value() { track(this, 'get', 'value') return this._value } set value(newValue) { if (newValue !== this._value) { this._value = newValue trigger(this, 'set', 'value', newValue) } } } export function shallowRef(value) { return new ShallowRefImpl(value) } export function isShallowRef(value) { return !!value[ReactiveFlags.IS_SHALLOW] }
shallowRef
函數(shù)會(huì)創(chuàng)建一個(gè)ShallowRefImpl
對(duì)象,并將傳入的值作為其內(nèi)部的_value
屬性的值。ShallowRefImpl
對(duì)象是一個(gè)帶有get
和set
方法的普通對(duì)象,當(dāng)讀取value
屬性時(shí),get
方法會(huì)返回_value
屬性的值;當(dāng)修改value
屬性時(shí),set
方法會(huì)將新值賦值給_value
屬性,并觸發(fā)相應(yīng)的依賴。
強(qiáng)制更新DOM
triggerRef
的使用非常簡(jiǎn)單,只需要傳遞一個(gè)Ref
對(duì)象作為參數(shù)即可。例如:
import { ref, triggerRef } from 'vue' const count = ref(0) // 在某些情況下需要手動(dòng)更新count,可以使用triggerRef triggerRef(count)
在這個(gè)例子中,我們使用ref
函數(shù)創(chuàng)建了一個(gè)名為count
的響應(yīng)式引用,它的初始值為0
。然后我們?cè)谀承┣闆r下需要手動(dòng)更新count,這時(shí)我們可以使用triggerRef
函數(shù)來(lái)觸發(fā)它的更新。
需要注意的是,當(dāng)使用triggerRef
函數(shù)觸發(fā)更新時(shí),它只會(huì)更新Ref
對(duì)象本身,而不會(huì)更新與之相關(guān)聯(lián)的組件。因此,我們應(yīng)該在明確知道需要手動(dòng)更新時(shí)使用triggerRef
函數(shù),而在普通情況下使用Vue
自身的響應(yīng)式系統(tǒng)來(lái)自動(dòng)更新相關(guān)組件。
在Vue3中,triggerRef
函數(shù)用于觸發(fā)一個(gè)ref
對(duì)象的依賴更新。其源碼如下:
import { effect } from './effect' import { track, trigger } from './operations' export function triggerRef(ref) { if (ref.__v_isRef) { const value = ref.value if (isTracking()) { track(ref, 'set', 'value') } ref.value = value trigger(ref, 'set', 'value', value) } else { console.warn(`triggerRef() expects a ref object passed as its argument.`) } }
在這個(gè)源碼中,首先判斷傳入的對(duì)象是否為ref
對(duì)象,如果是則獲取它的值,并使用track
函數(shù)追蹤這個(gè)ref
對(duì)象的依賴。然后將這個(gè)ref
對(duì)象的值賦值給它自己的value
屬性,并使用trigger
函數(shù)觸發(fā)這個(gè)ref
對(duì)象的依賴更新。如果傳入的對(duì)象不是ref
對(duì)象,則會(huì)輸出一個(gè)警告信息。
在 Vue 3 中,提供了一個(gè) customRef
函數(shù),用于創(chuàng)建一個(gè)自定義的、可響應(yīng)的引用對(duì)象。與 ref
和 shallowRef
不同的是,customRef
可以自定義 get
和 set
方法的實(shí)現(xiàn)邏輯,從而實(shí)現(xiàn)更加靈活的響應(yīng)式行為。
使用 customRef
函數(shù)創(chuàng)建的引用對(duì)象與 ref
對(duì)象類似,也具有 value
屬性,當(dāng)讀取這個(gè)屬性時(shí),會(huì)觸發(fā) get
方法的執(zhí)行;當(dāng)修改這個(gè)屬性時(shí),會(huì)觸發(fā) set
方法的執(zhí)行,并且會(huì)觸發(fā)相應(yīng)的依賴更新。與 ref
對(duì)象不同的是,customRef
函數(shù)本身并不會(huì)對(duì)傳入的初始值進(jìn)行處理,而是將其直接作為 get
方法的返回值,需要自己手動(dòng)處理。
下面是 customRef
函數(shù)的使用示例:
import { customRef } from 'vue' const myRef = customRef((track, trigger) => ({ value: 0, get() { track() return this.value }, set(newValue) { this.value = newValue trigger() } })) console.log(myRef.value) // 輸出 0 myRef.value = 1 console.log(myRef.value) // 輸出 1
在這個(gè)示例中,使用 customRef
函數(shù)創(chuàng)建了一個(gè)自定義的引用對(duì)象 myRef
,它的 get
方法用于追蹤依賴,返回 value
屬性的值;set
方法用于修改 value
屬性的值,并觸發(fā)相應(yīng)的依賴更新。當(dāng)讀取和修改 myRef
對(duì)象的 value
屬性時(shí),會(huì)分別觸發(fā)它的 get
和 set
方法。
注意:customRef
函數(shù)的參數(shù)是一個(gè)函數(shù),這個(gè)函數(shù)接收兩個(gè)參數(shù),分別是 track
和 trigger
函數(shù),它們用于追蹤依賴和觸發(fā)依賴更新。
import { track, trigger } from './effect' export function customRef(factory) { const ref = { __v_isRef: true, get value() { return factory().get() }, set value(newValue) { factory().set(newValue) } } return ref } export function triggerRef(ref) { trigger(ref, 'set', 'value', ref.value) }
在這個(gè)源碼中,定義了一個(gè) customRef
函數(shù),它接收一個(gè)工廠函數(shù)作為參數(shù),用于創(chuàng)建一個(gè)自定義的引用對(duì)象。在函數(shù)內(nèi)部,創(chuàng)建了一個(gè)普通的對(duì)象 ref
,它有一個(gè)只讀的 __v_isRef
屬性,用于標(biāo)識(shí)它是一個(gè) ref
對(duì)象;還有一個(gè)名為 value
的屬性,用于存儲(chǔ)引用對(duì)象的值,并且在讀取和修改時(shí)會(huì)觸發(fā)工廠函數(shù)的 get
和 set
方法。在 customRef
函數(shù)的最后,返回這個(gè) ref
對(duì)象。
總結(jié):這篇文章介紹了Vue3中的ref
函數(shù)、isRef
函數(shù)、shallowRef
函數(shù)和customRef
函數(shù)。ref
函數(shù)主要用于創(chuàng)建響應(yīng)式對(duì)象,引用DOM
實(shí)例,引用組件實(shí)例等。isRef
函數(shù)主要用于判斷傳入的數(shù)據(jù)是不是響應(yīng)式對(duì)象。shallowRef
函數(shù)創(chuàng)建一個(gè)“淺層”的響應(yīng)式對(duì)象,只追蹤值的屬性變化,而不追蹤對(duì)象內(nèi)部屬性的變化。customRef
函數(shù)可以創(chuàng)建自定義的引用對(duì)象,可以自定義get
和set
方法的實(shí)現(xiàn)邏輯。此外,文章還介紹了triggerRef
函數(shù),用于觸發(fā)ref
對(duì)象的依賴更新。
以上就是“Vue Ref全家桶怎么使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。