您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3.0中Ref與Reactive的區(qū)別是什么”,在日常操作中,相信很多人在Vue3.0中Ref與Reactive的區(qū)別是什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue3.0中Ref與Reactive的區(qū)別是什么”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
Ref與Reactive
Ref
Reactive
Ref與Reactive的區(qū)別
shallowRef 與shallowReactive
toRaw ---只修改數(shù)據(jù)不渲染頁面
markRaw --- 不追蹤數(shù)據(jù)
toRef --- 跟數(shù)據(jù)源關(guān)聯(lián) 不修改UI
toRefs ---設(shè)置多個toRef屬性值
customRef ---自定義一個ref
ref 捆綁頁面的標(biāo)簽
Ref 用來創(chuàng)建基礎(chǔ)類型的響應(yīng)式數(shù)據(jù),模板默認(rèn)調(diào)用value顯示數(shù)據(jù)。方法中修改需要修改value的值才能修改
<!-- 模板語法> <template> <div>{{state}}</div> </template> //js 腳本 setup(){ let state = ref(10) state.value = 11 return {state} }
Reactive 用來創(chuàng)建引用類型的響應(yīng)式數(shù)據(jù),
<!-- 模板語法> <template> <div>{{state.name}}</div> </template> //js 腳本 setup(){ let state = reactive({name:'aaa'}}) state.name = 'zhangsan' return {state} }
Ref的本質(zhì)是通過Reactive創(chuàng)建的,Ref(10)=>Reactive({value:10});
Ref在模板調(diào)用可以直接省略value,在方法中改變變量的值需要修改value的值,才能修改成功。Reactive在模板必須寫全不然顯示整個數(shù)據(jù)。
Reactive的本質(zhì)是將每一層的數(shù)都解析成proxy對象,Reactive 的響應(yīng)式默認(rèn)都是遞歸的,改變某一層的值都會遞歸的調(diào)用一遍,重新渲染dom。
Ref與Reactive創(chuàng)建的都是遞歸響應(yīng)的,將每一層的json 數(shù)據(jù)解析成一個proxy對象,shallowRef 與shallowReactive創(chuàng)建的是非遞歸的響應(yīng)對象,shallowReactive創(chuàng)建的數(shù)據(jù)第一層數(shù)據(jù)改變會重新渲染dom
var state = shallowReactive({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.a = '1' //改變第一層的數(shù)據(jù)會導(dǎo)致頁面重新渲染 //state => Proxy {a:"a",gf:{...}} //如果不改變第一層 只改變其他的數(shù)據(jù) 頁面不會重新渲染 例如 state.gf.b = 2
通過shallowRef創(chuàng)建的響應(yīng)式對象,需要修改整個value才能重新渲染dom
var state = shallowRef({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.value.a = 1 /* 并不能重新渲染,shallowRef的原理也是通過shallowReactive({value:{}})創(chuàng)建的,要修改value才能重新渲染 */ state.value = { a:'1', gf:{ b:'2', f:{ c:'3', s:{d:'d'} } } }
如果使用了shallowRef想要只更新某一層的數(shù)據(jù)可以使用triggerRef
var state = shallowRef({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.value.gf.f.s.d = 4 triggerRef(state)
頁面就會重新渲染
如果只想修改響應(yīng)式的數(shù)據(jù)不想引起頁面渲染可以使用toRaw這個方法
var obj = {name:'test'} var state = reactive(obj) var obj2 = toRaw(state) obj2.name = 'zs'//并不會引起頁面的渲染 ---- //如果是用ref 創(chuàng)建的 就要獲取value值 var obj = {name:'test'} var state = ref(obj) var obj2 = toRaw(state.value)
如果不想要數(shù)據(jù)被追蹤,變成響應(yīng)式數(shù)據(jù)可以調(diào)用這個方法,就無法 追蹤修改數(shù)據(jù)重新渲染頁面
var obj = {name:'test'} obj = markRaw(obj) var state = reactive(obj) state.name = 'zs'//無法修改數(shù)據(jù) 頁面也不會修改
如果使用ref 創(chuàng)建的響應(yīng)式變量,不會與源數(shù)據(jù)關(guān)聯(lián),如果想要與源數(shù)據(jù)關(guān)聯(lián)但數(shù)據(jù)更改不更新UI,就要使用toRef創(chuàng)建
var obj = {name:'test'} var state = ref(obj.name) state.name = 'zs' //此時obj的name 屬性值并不會改變,UI會自動更新 /// var obj = {name:'test'} var state = toRef(obj,'name') //只能設(shè)置一個屬性值 state.name = 'zs'//此時obj里面的name屬性值會發(fā)生改變,但是UI 不會更新
如果想要設(shè)置多個toRef屬性值,可以使用toRefs
var obj = {name:'test',age:16} var state = toRefs(obj) state.name.value = 'zs'//obj的name的屬性值也會改變,但UI不會更新 state.age.value = 18//obj的age的屬性值也會改變,但UI不會更新
通過customRef這個方法可以自定義一個響應(yīng)式的ref方法
function myRef(value){ /* customRef函數(shù)返回一個對象,對象里面有2個方法,get/set方法,創(chuàng)建的對象獲取數(shù)據(jù)的時候能 訪問到get方法,創(chuàng)建的對象修改值的時候會觸發(fā)set 方法 customRef函數(shù)有2個參數(shù),track/trigger,track參數(shù)是追蹤的意思,get 的方法里面調(diào)用,可以隨時追蹤數(shù)據(jù)改變。trigger參數(shù) 是觸發(fā)響應(yīng)的意思,set 方法里面調(diào)用可以更新UI界面 */ return customRef((track,trigger)=>{ return { get(){ track()//追蹤數(shù)據(jù) return value }, set(newVal){ value = newVal trigger()//更新UI界面 } } }) } setup(){ var age = myRef(18) age.value = 20 }
vue2.0 可以通過this.refs拿到dom元素,vue3取消了這一操作,沒有了refs拿到dom 元素,vue3取消了這一操作,沒有了refs拿到dom元素,vue3取消了這一操作,沒有了refs這個屬性值,可以直接用ref()方法生成響應(yīng)式變量與dom 元素捆綁
<template> <div ref="box"></div> </template> import {ref,onMounted} from 'vue' /* setup 方法調(diào)用是在生命周期beforeCreate與created 之間 */ <script> setup(){ var box = ref(null) onMounted(()=>{ console.log('onMounted',box.value) }) console.log(box.value) return {box} } </script>
到此,關(guān)于“Vue3.0中Ref與Reactive的區(qū)別是什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。