您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue3中ref toRef和toRefs的區(qū)別有哪些”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue3中ref toRef和toRefs的區(qū)別有哪些”這篇文章吧。
(1) 生成值類型的響應(yīng)式數(shù)據(jù), 通過(guò) .value修改值
<template> <div>{{ ageRef }}</div> </template> <script> import { ref } from 'vue' export default { setup() { const ageRef = ref(20) setInterval(() => { ageRef.value += 1 }, 1000) return { ageRef } }, } </script>
上面這段代碼,定義了一個(gè)ageRef變量,并每秒將ageRef加1,頁(yè)面展示的數(shù)值也會(huì)加1.
(2) 可用于reactive中
將上面的代碼改動(dòng)如下, 引入reactive定義變量,將ref定義的變量引入reactive中, 模板中展示reactive的變量. 最后的效果和上面(1)的一樣
<template> <div>{{ info.age }}</div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const ageRef = ref(20) const info = reactive({ age: ageRef }) setInterval(() => { ageRef.value += 1 }, 1000) return { info } }, } </script>
(3) 可用于獲取Dom
<template> <div ref="eleDom">ref-dom-test</div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const eleDom = ref(null) onMounted(() => { console.log(eleDom.value.innerHTML) // ref-dom-test }) return { eleDom } }, }
上面代碼控制臺(tái)輸出ref-dom-test, 說(shuō)明獲取到了Dom元素.
要獲取Dom元素必須要符合以下規(guī)則
定義的ref變量名必須要和模板中ref中的值一致,如代碼中的eleDom
針對(duì)一個(gè)響應(yīng)式對(duì)象的prop
創(chuàng)建一個(gè)ref,具有響應(yīng)式
兩者保持引用關(guān)系
我們來(lái)看下面這段代碼
<template> <div>{{ state.age }} --- {{ ageRef }}</div> </template> <script> import { toRef, reactive } from 'vue' export default { setup() { const state = reactive({ name: 'JL', age: 18 }) const ageRef = toRef(state, 'age') setTimeout(() => { state.age = 20 }, 1000) setTimeout(() => { ageRef.value = 21 }, 2000) return { state, ageRef } }, } </script>
上面的代碼中,使用toRef將state的age屬性變成一個(gè)響應(yīng)式變量,然后在1秒后將state的age值變?yōu)?0,此時(shí)ageRef也會(huì)變成20;在2秒后將ageRef的值變?yōu)?1,此時(shí)state的age值也會(huì)變成21,說(shuō)明了兩者保持相互引用關(guān)系
toRef針對(duì)的是響應(yīng)式,針對(duì)的不是普通對(duì)象,如果用于非響應(yīng)式,產(chǎn)出的結(jié)果不具有響應(yīng)式
將一個(gè)響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象
對(duì)象的每一個(gè)屬性都是對(duì)應(yīng)的ref
兩者保持引用關(guān)系
我們來(lái)看下面這段代碼
<template> <div>{{ name }}---{{ age }}</div> </template> <script> import { reactive, toRefs } from 'vue' export default { setup() { const state = reactive({ name: 'JL', age: 18 }) const stateRefs = toRefs(state) setTimeout(() => { state.age = 20 }, 1000) setTimeout(() => { stateRefs.age.value = 21 }, 2000) return stateRefs }, } </script>
上面的代碼中,使用toRefs將state轉(zhuǎn)變成一個(gè)普通對(duì)象,這時(shí)候就可以直接返回stateRefs,這時(shí)候在template就可以直接調(diào)用name和age。然后在1秒后將state的age值變?yōu)?0,此時(shí)頁(yè)面中的age也會(huì)變成20;在2秒后將stateRefs中的name的值變?yōu)?1,此時(shí)頁(yè)面中的age值也會(huì)變成21,說(shuō)明了兩者保持相互引用關(guān)系
toRefs將響應(yīng)式對(duì)象變成普通對(duì)象后,每一個(gè)屬性都具有響應(yīng)式ref,此時(shí)需要使用 .value才能獲取其值
reactive做對(duì)象的響應(yīng)式,ref做值類型響應(yīng)式
setup中返回toRefs(state), 或者toRef(state, 'xxx')---(這樣就能夠在template中不使用state.xxx)
ref的變量命名都用xxxRef
合成函數(shù)返回響應(yīng)式對(duì)象時(shí),使用toRefs
例如:
<template> <div>x:{{x}} y:{{y}}</div> </template> <script> import { reactive, toRefs } from 'vue' export default { setup() { function test() { const state = reactive({ x: 1, y: 2 }) return toRefs(state) } const {x, y} = test() setTimeout(() => { x.value = 2 }, 1000) return { x, y } } } </script>
上面的代碼,test函數(shù)中定義了響應(yīng)式對(duì)象state,并通過(guò)toRefs將其轉(zhuǎn)為普通對(duì)象并返回,這時(shí)候可以結(jié)構(gòu)賦值,并且值是響應(yīng)式的
在上面我們講到,使用reactive和toRef也可以將值類型轉(zhuǎn)換成響應(yīng)式的,為什么還需要ref呢?
值類型不具有響應(yīng)式(proxy)
setup()、computed()...都可能返回值類型,如果vue不定義ref,用戶需要響應(yīng)式的值類型的時(shí)候就會(huì)通過(guò)其他方式(reactive/toRef, reactive/toRefs)自造ref,就會(huì)造成代碼更混亂
ref為什么需要加一個(gè).value來(lái)獲取值呢?為什么要這么麻煩呢?
ref是一個(gè)對(duì)象(不會(huì)丟失響應(yīng)式),value存儲(chǔ)值
通過(guò).value屬性的get和set來(lái)實(shí)現(xiàn)響應(yīng)式
用于reactive和模板(vue編譯)的時(shí)候不需要.value,其他情況都需要
初衷: 在不丟失響應(yīng)式的前提下,對(duì)對(duì)象數(shù)據(jù)進(jìn)行解構(gòu)
前提: 針對(duì)的是響應(yīng)式對(duì)象,不是普通對(duì)象
結(jié)果: 不創(chuàng)造響應(yīng)式,只延續(xù)響應(yīng)式
以上是“Vue3中ref toRef和toRefs的區(qū)別有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(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)容。