快捷導(dǎo)航

Vue3中ref與toRef的區(qū)別淺析

更新時(shí)間：2021年06月23日 09:07:10 作者：我的div丟了腫么辦

我們知道ref可以用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),而toRef也可以創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue3中ref與toRef區(qū)別的相關(guān)資料,需要的朋友可以參考下

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

如果利用ref將某一個(gè)對(duì)象中的某一個(gè)屬性值變成響應(yīng)式數(shù)據(jù)

我們修改響應(yīng)式數(shù)據(jù)是不會(huì)影響原始數(shù)據(jù)的;

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

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

<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}
    
    //將對(duì)象中的某一個(gè)屬性
    //變成響應(yīng)式數(shù)據(jù)
    //而不是將對(duì)象變成響應(yīng)式數(shù)據(jù)
    let stateObj=ref(obj.name)
    function func1(){
      stateObj.value="張三變成李四";
      //原始數(shù)據(jù)沒(méi)有發(fā)生改變 原始數(shù)據(jù)obj {name: "張三", age: 22}
      console.log("原始數(shù)據(jù)obj",obj)

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

    }

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

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

如果利用toRef將某一個(gè)對(duì)象中的屬性變成了響應(yīng)式的數(shù)據(jù)

我們修改響應(yīng)式的數(shù)據(jù)是會(huì)影響原始數(shù)據(jù)的

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

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

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

<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}
    //將對(duì)象中的某一個(gè)屬性name變成響應(yīng)式數(shù)據(jù)
    //而不是將對(duì)象變成響應(yīng)式數(shù)據(jù)
    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>