您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3中關(guān)于ref和reactive的問題怎么解決”,在日常操作中,相信很多人在Vue3中關(guān)于ref和reactive的問題怎么解決問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Vue3中關(guān)于ref和reactive的問題怎么解決”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
如果你使用過 Vue3,你知道的,在 Vue3 中有兩個(gè)非常常用的響應(yīng)式 API:reactive 和 ref。它們會(huì)把我們想要追蹤的數(shù)據(jù)變成響應(yīng)式。
而且我們?cè)谑褂脮r(shí)一直被告知 ref 用于創(chuàng)建基礎(chǔ)類型的響應(yīng)式,也可以創(chuàng)建引用類型的響應(yīng)式。而對(duì)于引用類型,底層也是轉(zhuǎn)換為 reactive 來進(jìn)行響應(yīng)式處理。那既然這樣為撒還需要 reactive ,全部使用 ref 不就行了嗎?
雖然 ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)在腳本中需要通過 .value 才能訪問到呀!但是這里肯定影響不大。并且在模板中會(huì)自動(dòng)添加上 .value,所以模板中不需要通過 .value 訪問。
既然這二者基本沒撒差別,但是還是暴露了 reactive 這個(gè) API,難道有什么場(chǎng)景是 reactive 能做而 ref 做不了的?
我們先簡(jiǎn)單了解一下這兩個(gè) API。
reactive
返回對(duì)象的響應(yīng)式副本,響應(yīng)式轉(zhuǎn)換是“深層”的——它影響所有嵌套 property。我們一般這樣寫。
const obj = reactive({ count: 0 })
并且可以直接使用。
const count = obj.count
ref
受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的 ref 對(duì)象。ref 對(duì)象僅有一個(gè) .value property,指向該內(nèi)部值。我們一般是這樣寫。
const data = ref(xxx)
引用的時(shí)候,一般會(huì)通過data.value的方式引用。
const dataValue = data.value
通過跟蹤 Vue3 的源代碼可以證明,當(dāng)我們調(diào)用 ref 方法來定義響應(yīng)式數(shù)據(jù)時(shí),當(dāng)參數(shù)為對(duì)象類型時(shí),其實(shí)里面用的是 reactive 方法。也就是說上面的 data.value ,事實(shí)上是 reactive 方法創(chuàng)造出來的。
注意:
reactive 能做的 ref 也能做,并且還是用 reactive 做的
當(dāng) ref 的參數(shù)為對(duì)象時(shí),用的就是 reactive 方法
在 Vue3 中,如果是把對(duì)象類型的數(shù)據(jù)弄成響應(yīng)式,reactive 和 ref 都可以,且ref 內(nèi)部是通過r eactive 來支持的。也就是說,你 reactive 能做的,我 ref 也能做。
簡(jiǎn)單來說 ref 是在 reactive 上在進(jìn)行了封裝進(jìn)行了增強(qiáng),所以在 Vue3 中 reactive 能做的,ref 也能做,reactive 不能做的,ref 也能做。
個(gè)人理解ref是reactive的語法糖,如:ref(1) 就等價(jià)于 reactive({value: 1});
平時(shí)項(xiàng)目ref一把梭,是可以的,問題也不大
Ref
ref數(shù)據(jù)響應(yīng)式監(jiān)聽。ref 函數(shù)傳入一個(gè)值作為參數(shù),一般傳入基本數(shù)據(jù)類型,返回一個(gè)基于該值的響應(yīng)式Ref對(duì)象,該對(duì)象中的值一旦被改變和訪問,都會(huì)被跟蹤到,就像我們改寫后的示例代碼一樣,通過修改 count.value 的值,可以觸發(fā)模板的重新渲染,顯示最新的值
<template> <h2>{{name}}</h2> <h2>{{age}}</h2> <button @click="sayName">按鈕</button> </template> <script lang="ts"> import {ref,computed} from 'vue' export default { name: 'App', setup(){ const name = ref('zhangsan') const birthYear = ref(2000) const now = ref(2020) const age = computed(()=>{ return now.value - birthYear.value }) const sayName = () =>{ name.value = 'I am ' + name.value } return { name, sayName, age } } } </script>
reactive
reactive是用來定義更加復(fù)雜的數(shù)據(jù)類型,但是定義后里面的變量取出來就不在是響應(yīng)式Ref對(duì)象數(shù)據(jù)了
所以需要用toRefs函數(shù)轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)對(duì)象
將上面用ref寫的代碼轉(zhuǎn)化成reactive型的代碼
<template> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <div> <h2>{{ name }}</h2> <h2>{{ age }}</h2> <button @click="sayName">按鈕</button> </div> </template> <script lang="ts"> import { computed, reactive,toRefs } from "vue"; interface DataProps { name: string; now: number; birthYear: number; age: number; sayName: () => void; } export default { name: "App", setup() { const data: DataProps = reactive({ name: "zhangsan", birthYear: 2000, now: 2020, sayName: () => { console.log(1111); console.log(data.name); data.name = "I am " + data.name; console.log(data.name); }, age: computed(() => { return data.now - data.birthYear; }), }); const refData = toRefs(data) refData.age return { ...refData, }; }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
到此,關(guān)于“Vue3中關(guān)于ref和reactive的問題怎么解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(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)容。