您好,登錄后才能下訂單哦!
這篇文章給大家介紹setup+ref+reactive如何實(shí)現(xiàn)vue3響應(yīng)式功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
setup 是用來(lái)寫(xiě)組合式 api ,內(nèi)部的數(shù)據(jù)和方法需要通過(guò) return 之后,模板才能使用。在之前 vue2 中,data 返回的數(shù)據(jù),可以直接進(jìn)行雙向綁定使用,如果我們把 setup 中數(shù)據(jù)類(lèi)型直接雙向綁定,發(fā)現(xiàn)變量并不能實(shí)時(shí)響應(yīng)。接下來(lái)就看看setup如何實(shí)現(xiàn)data的響應(yīng)式功能?
setup 內(nèi)的自定義屬性不具備響應(yīng)式能力,所以引入了 ref ,ref 底層通過(guò)代理,把屬性包裝值包裝成一個(gè) proxy ,proxy 內(nèi)部是一個(gè)對(duì)象,使得基礎(chǔ)類(lèi)型的數(shù)據(jù)具備響應(yīng)式能力,使用之前必須引入。
示例1:ref 使用
<template> <div> <input type="text" v-model="mood"> {{mood}} </div> </template> <script> import { ref } from "vue" export default{ setup(){ let mood = ref("此時(shí)心情好差呀!") setTimeout(()=>{ mood.value = "心情要變的像人一樣美" },3000) return{ mood } } } </script>
此時(shí)可以在 setup 模板內(nèi)任意編輯 mood,可以保證實(shí)時(shí)響應(yīng)。實(shí)例在修改 mood 的值加了 value ,是因?yàn)?ref 的工作原來(lái):
let mood = ref("此時(shí)心情好差呀!")
修改成:let mood = proxy({value:"此時(shí)心情好差呀!"})
上述的 ref 讓基礎(chǔ)數(shù)據(jù)類(lèi)型具備了響應(yīng)式,但是如果我們換成引用類(lèi)型的數(shù)據(jù),就會(huì)失效。所以引入了 reactive。
reactive 通過(guò)底層包裝,將引用類(lèi)型數(shù)據(jù)包裝到 proxy 內(nèi),使用原理如:
let me = reactive({ single:true, want:"暖的像火爐的暖男" }) // 運(yùn)行結(jié)果為 let me = proxy : { single: true, want:"暖的像火爐的暖男" }
引用的時(shí)候,直接使用 me.want 就可以了。
示例2:reactive 使用
<template> <div> {{me.want}} </div> </template> <script> import { ref , reactive } from "vue" export default{ setup(){ let me = reactive({ single:true, want:"暖的像火爐的暖男" }) setTimeout(()=>{ me.want = "夏天容易化了" },3000) return{ me } } } </script>
通過(guò) setup + ref + reactive 就可以完全實(shí)現(xiàn) vue2 中 data 的響應(yīng)式功能,所以 setup 完全可以替換掉 data。
setup + ref + reactive 實(shí)現(xiàn)了數(shù)據(jù)響應(yīng)式,不能使用 ES6 解構(gòu),會(huì)消除響應(yīng)特性。所以需要 toRefs 解構(gòu),使用時(shí),需要先引入。
它的工作原理為:
import { ref , reactive, toRefs } from "vue" let me = reactive({ single:true, want:"暖的像火爐的暖男" }) //運(yùn)行為 let me = proxy : { single: true, want:"暖的像火爐的暖男" } const { single, want } = toRefs( me ) // 運(yùn)行為 single : proxy({ value:true }) want : proxy({ value:"暖的像火爐的暖男" })
toRefs 把 single 和 want 解構(gòu)成兩個(gè) proxy ,所以是響應(yīng)式的。
示例3:toRefs 解構(gòu)數(shù)據(jù)
<template> <div> {{want}} <input type="text" v-model="want"> </div> </template> <script> import { ref , reactive, toRefs } from "vue" export default{ setup(){ let me = reactive({ single:true, want:"暖的像火爐的暖男" }) setTimeout(()=>{ me.want = "夏天容易化了" },3000) // 解構(gòu) const {single,want} = toRefs(me) return{ single, want } } } </script>
toRef作用:將對(duì)象某一個(gè)屬性,作為引用返回。比較難理解,可以打印查看下結(jié)果更容易理解。
let me = reactive({ single:true, want:"暖的像火爐的暖男" }) let lv = toRef( me, 'love' ) console.log('love',love); //打印結(jié)果 ObjectRefImpl { __v_isRef: true _key: "love" _object: Proxy {single: true, want: "暖的像火爐的暖男"} value: undefined [[Prototype]]: Object }
toRef 是組件之間進(jìn)行傳值值,對(duì)可選參數(shù)進(jìn)行處理,運(yùn)行時(shí),先查看 me中是否存在 love ,如果存在時(shí)就繼承 me 中的 love ,如果不存在時(shí)就創(chuàng)建一個(gè) love ,然后解構(gòu)賦值給變量 lv。
示例4:toRef 使用
<template> <div> {{want}} <input type="text" v-model="want"> </div> </template> <script> import { ref , reactive, toRefs, toRef } from "vue" export default{ setup(){ let me = reactive({ single:true, want:"暖的像火爐的暖男" }) setTimeout(()=>{ me.want = "夏天容易化了" },3000) const {single,want } = toRefs(me) const love = toRef(me,'love') console.log('love',love); return{ single, want } } } </script>
ref 讓基礎(chǔ)數(shù)據(jù)類(lèi)型具備響應(yīng)式,而 reactive 讓引用類(lèi)型的數(shù)據(jù)具備響應(yīng)式。setup + ref + reactive 完全實(shí)現(xiàn) vue2 中 data 響應(yīng)式功能。
toRefs 解構(gòu) reactive 包裝的數(shù)據(jù),toRef 用于對(duì)可選參數(shù)。
關(guān)于setup+ref+reactive如何實(shí)現(xiàn)vue3響應(yīng)式功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(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)容。