Vue3.0中Ref與Reactive的區別示例詳析

目錄

Ref與Reactive

Ref

Ref 用來(lái)創(chuàng )建基礎類(lèi)型的響應式數據，模板默認調用value顯示數據。方法中修改需要修改value的值才能修改

<!-- 模板語(yǔ)法> 
<template>
   <div>{{state}}</div>
</template> 
//js 腳本
setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}

Reactive

Reactive 用來(lái)創(chuàng )建引用類(lèi)型的響應式數據，

<!-- 模板語(yǔ)法> 
<template>
   <div>{{state.name}}</div>
</template> 
//js 腳本
setup(){
     let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}

Ref與Reactive的區別

Ref的本質(zhì)是通過(guò)Reactive創(chuàng )建的，Ref(10)=>Reactive({value:10});

Ref在模板調用可以直接省略value，在方法中改變變量的值需要修改value的值，才能修改成功。Reactive在模板必須寫(xiě)全不然顯示整個(gè)數據。

Reactive的本質(zhì)是將每一層的數都解析成proxy對象，Reactive 的響應式默認都是遞歸的，改變某一層的值都會(huì )遞歸的調用一遍，重新渲染dom。

shallowRef 與shallowReactive

Ref與Reactive創(chuàng )建的都是遞歸響應的，將每一層的json 數據解析成一個(gè)proxy對象，shallowRef 與shallowReactive創(chuàng )建的是非遞歸的響應對象，shallowReactive創(chuàng )建的數據第一層數據改變會(huì )重新渲染dom

 var state = shallowReactive({
    a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 state.a = '1'
 //改變第一層的數據會(huì )導致頁(yè)面重新渲染
 //state => Proxy {a:"a",gf:{...}}
//如果不改變第一層 只改變其他的數據 頁(yè)面不會(huì )重新渲染 例如 state.gf.b = 2

通過(guò)shallowRef創(chuàng )建的響應式對象，需要修改整個(gè)value才能重新渲染dom

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.a = 1
/*
并不能重新渲染，shallowRef的原理也是通過(guò)shallowReactive({value:{}})創(chuàng  )建的，要修改value才能重新渲染
*/
state.value = {
    a:'1',
    gf:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

如果使用了shallowRef想要只更新某一層的數據可以使用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è)面就會(huì )重新渲染

toRaw ---只修改數據不渲染頁(yè)面

如果只想修改響應式的數據不想引起頁(yè)面渲染可以使用toRaw這個(gè)方法

var obj = {name:'test'}
var state = reactive(obj)
var obj2 = toRaw(state)
obj2.name = 'zs'//并不會(huì )引起頁(yè)面的渲染

----
//如果是用ref 創(chuàng  )建的 就要獲取value值
var obj = {name:'test'}
var state = ref(obj)
var obj2 = toRaw(state.value)

markRaw --- 不追蹤數據

如果不想要數據被追蹤，變成響應式數據可以調用這個(gè)方法，就無(wú)法 追蹤修改數據重新渲染頁(yè)面

var obj = {name:'test'}
obj = markRaw(obj)
var state = reactive(obj)
state.name = 'zs'//無(wú)法修改數據 頁(yè)面也不會(huì )修改

toRef --- 跟數據源關(guān)聯(lián) 不修改UI

如果使用ref 創(chuàng )建的響應式變量，不會(huì )與源數據關(guān)聯(lián)，如果想要與源數據關(guān)聯(lián)但數據更改不更新UI，就要使用toRef創(chuàng )建

var obj = {name:'test'}
var state = ref(obj.name)
state.name = 'zs' //此時(shí)obj的name 屬性值并不會(huì )改變，UI會(huì )自動(dòng)更新

///
var obj = {name:'test'}
var state = toRef(obj,'name') //只能設置一個(gè)屬性值
state.name = 'zs'//此時(shí)obj里面的name屬性值會(huì )發(fā)生改變，但是UI 不會(huì )更新

toRefs ---設置多個(gè)toRef屬性值

如果想要設置多個(gè)toRef屬性值，可以使用toRefs

var obj = {name:'test',age:16}
var state = toRefs(obj)
state.name.value = 'zs'//obj的name的屬性值也會(huì )改變，但UI不會(huì )更新
state.age.value = 18//obj的age的屬性值也會(huì )改變，但UI不會(huì )更新

customRef ---自定義一個(gè)ref

通過(guò)customRef這個(gè)方法可以自定義一個(gè)響應式的ref方法

function myRef(value){
   /*
    customRef函數返回一個(gè)對象，對象里面有2個(gè)方法，get/set方法，創(chuàng  )建的對象獲取數據的時(shí)候能 訪(fǎng)問(wèn)到get方法，創(chuàng  )建的對象修改值的時(shí)候會(huì )觸發(fā)set 方法
    customRef函數有2個(gè)參數，track/trigger，track參數是追蹤的意思，get 的方法里面調用，可以隨時(shí)追蹤數據改變。trigger參數 是觸發(fā)響應的意思，set 方法里面調用可以更新UI界面
   */
    return customRef((track,trigger)=>{
       return {
          get(){
             track()//追蹤數據
             return value     
          },
          set(newVal){
             value = newVal
             trigger()//更新UI界面
          }
       }
    })

}

setup(){
   var age = myRef(18)
   age.value = 20
}

ref 捆綁頁(yè)面的標簽

vue2.0 可以通過(guò)this.refs拿到dom元素，vue3取消了這一操作，沒(méi)有了refs拿到dom 元素，vue3取消了這一操作，沒(méi)有了refs拿到dom元素，vue3取消了這一操作，沒(méi)有了refs這個(gè)屬性值，可以直接用ref()方法生成響應式變量與dom 元素捆綁

<template>
   <div ref="box"></div>

</template>
import {ref,onMounted} from 'vue'
/*
 setup 方法調用是在生命周期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區別的文章就介紹到這了,更多相關(guān)Vue3.0 Ref與Reactive區別內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！