Vue3中ref與toRef的區別淺析

1. ref是復制,視圖會(huì )更新

如果利用ref將某一個(gè)對象中的某一個(gè)屬性值變成響應式數據

我們修改響應式數據是不會(huì )影響原始數據的;

同時(shí)視圖會(huì )跟新。

ref就是復制 復制是不會(huì )影響原始數據的

<template>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"張三",age:22}
    
    //將對象中的某一個(gè)屬性
    //變成響應式數據
    //而不是將對象變成響應式數據
    let stateObj=ref(obj.name)
    function func1(){
      stateObj.value="張三變成李四";
      //原始數據沒(méi)有發(fā)生改變 原始數據obj {name: "張三", age: 22}
      console.log("原始數據obj",obj)

      //響應式數據發(fā)生改變了  
      /**
      響應式stateObj RefImpl {
          _rawValue: "張三變成李四", _shallow: false,
          __v_isRef: true, _value: "張三變成李四"
      }
      **/
      //變成了一個(gè)ref的對象
      console.log("響應式stateObj",stateObj)

    }

    return {stateObj,func1}
},
}
</script>

2.toRef是引用,視圖不跟新

如果利用toRef將某一個(gè)對象中的屬性變成了響應式的數據

我們修改響應式的數據是會(huì )影響原始數據的

如果數據是通過(guò)toRef創(chuàng )建的，修改值后，數據不會(huì )觸發(fā)視圖

toRef是引用；它引用的是以前那個(gè)對象中的屬性

所以你修改后，會(huì )影響到原始數據終中的值

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {toRef} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"張三",age:22}
    //將對象中的某一個(gè)屬性name變成響應式數據
    //而不是將對象變成響應式數據
    let state=toRef(obj, 'name');
    console.log('toRef',state)
    function func1(){
      state.value="我是李四";
      console.log('obj',obj)
      console.log('state',state)
    }
    return {state,func1}
  },
}
</script>

3.結論

ref復制， 修改響應式數據，不會(huì )影響以前的數據，界面會(huì )更改。

toRef引用， 修改響應式的數據，會(huì )影響以前的數據，界面不會(huì )更新。

toRef的使用場(chǎng)景

如果想讓響應式數據和原始數據關(guān)聯(lián)起來(lái)。

并且更新響應式數據后，不想視圖更新；那么就可以使用toRef

小結：

ref和toRef的區別

(1). ref本質(zhì)是拷貝，修改響應式數據不會(huì )影響原始數據；toRef的本質(zhì)是引用關(guān)系，修改響應式數據會(huì )影響原始數據

(2). ref數據發(fā)生改變，界面會(huì )自動(dòng)更新；toRef當數據發(fā)生改變是，界面不會(huì )自動(dòng)更新

(3). toRef傳參與ref不同；toRef接收兩個(gè)參數，第一個(gè)參數是哪個(gè)對象，第二個(gè)參數是對象的哪個(gè)屬性

總結

到此這篇關(guān)于Vue3中ref與toRef區別的文章就介紹到這了,更多相關(guān)Vue3 ref與toRef區別內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！