快捷導(dǎo)航

vue3中的ref,toRef,toRefs三個(gè)的作用使用小結(jié)

更新時(shí)間：2022年11月11日 11:36:25 作者：有兩把刷子

Vue3中ref、reactive、toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，就此做一份筆記作為區(qū)別，本文重點(diǎn)給大家講解vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧

1. ref的使用

ref 接受一個(gè)原始值，返回一個(gè)具有響應(yīng)式的對(duì)象，對(duì)象有一個(gè)value屬性，其值就是所傳遞的原始值。

ref是做的一個(gè)拷貝關(guān)系，修改對(duì)象msg的值，不會(huì)影響對(duì)象obj，視圖會(huì)發(fā)生變化。

    import { ref } from "vue";
    let obj = { name: "你好", age: 16 };
    let msg = ref(obj.name);
    console.log(msg.value); // 你好
    let arr = ref([]) // ref 可以是任何類型 也可以是對(duì)象
    function change1() {
      msg.value = "世界"; 
      //修改msg1數(shù)據(jù)的時(shí)候必須要加 .value 渲染數(shù)據(jù)的時(shí)候就不用加了
      console.log(obj, msg.value);
      // {name: "你好", age: 16} '世界' 
      // 數(shù)據(jù)此時(shí)沒(méi)改變 但是頁(yè)面的數(shù)據(jù)改變了
      
    }
    change1();
 
     return {
        obj,
        msg,
     };

如果給dom上加ref 就是當(dāng)前的dom元素

<template>
  <div class="home-new">  
      <div ref="target">
       
      </div>
  </div>
</template>
import {ref} from 'vue'
export default {
  name: "HomeNew",
  setup(p, { emit }) {
    const target = ref(null);
    // 懶加載
    console.log(target);
    return {
      target,
    };
  },
 
};

2. toRef的使用

toRef用來(lái)給抽離響應(yīng)式對(duì)象中的某一個(gè)屬性，并把該屬性包裹成ref對(duì)象，使其和原對(duì)象產(chǎn)生鏈接

toRef是做的一種引用關(guān)系，修改msg2的值，會(huì)影響對(duì)象msg，但視圖不會(huì)發(fā)生變化

    setup(){
    	let msg = { name: 'zs', age: 16 }
        let msg2 = toRef(msg, 'name')
        console.log(msg2.value)	// zs
        function change2() {
            msg2.value = 'ww'
            console.log(msg, msg2.value) // {name: "ww", age: 16} ww
            //此時(shí) msg.ww 數(shù)據(jù)變了 但是視圖上的是不會(huì)變的
        }
        change2()
        return { msg2,change2 }
    }

3. toRefs的使用

toRefs用來(lái)把響應(yīng)式對(duì)象轉(zhuǎn)換成普通對(duì)象，把對(duì)象中的每一個(gè)屬性，包裹成ref對(duì)象

toRefs就是toRef的升級(jí)版，只是toRefs是把響應(yīng)式對(duì)象進(jìn)行轉(zhuǎn)換，其余的特性和toRef無(wú)二

setup(){
    let msg = { name: 'zs', age: 16 }
    let msg3 = toRefs(msg)
    console.log(msg) // { name:ref, age:ref }  ref代指ref對(duì)象
    function change3() {
      msg3.name.value = 'zl'
      msg3.age.value = 20
      console.log(msg, msg3) // {name: "zl", age: 20} { name:ref, age:ref }
    }
    change3()
    return { msg3, change3 }
}

請(qǐng)求過(guò)來(lái)的數(shù)據(jù)封裝了一下

<script>
import { reactive, toRefs } from "vue";
import { getBanner } from "@/api";
export default {
  setup() {
    return {
      ...toRefs(getBan()),
    };
  },
};
function getBan() {
  let bannerList = reactive({
    list: [],// 模板中直接 寫入 list 就可以了
  });
  getBanner().then((res) => {
    bannerList.list = res.data;
    console.log(bannerList.list);
  });
  return bannerList;
}
</script>

這樣寫模板中直接寫入 {{ list }} 就可以了，不用 {{ obj.list }}，修改數(shù)據(jù)的時(shí)候還是 obj.list = 'aaa'

  import { reactive, toRefs } from "vue";
  setup() {
    let obj = reactive({
      list: [],
      newS: [],
      moods: [],
    });
 
    return { ...toRefs(obj) };
  },

4.總結(jié)

ref、toRef、toRefs 都可以將某個(gè)對(duì)象中的屬性變成響應(yīng)式數(shù)據(jù)

ref的本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)，不會(huì)影響到原始數(shù)據(jù)，視圖會(huì)更新

toRef、toRefs的本質(zhì)是引用，修改響應(yīng)式數(shù)據(jù)，會(huì)影響到原始數(shù)據(jù)，視圖會(huì)更新

toRef 一次僅能設(shè)置一個(gè)數(shù)據(jù)，接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是哪個(gè)對(duì)象，第二個(gè)參數(shù)是對(duì)象的哪個(gè)屬性

toRefs接收一個(gè)對(duì)象作為參數(shù)，它會(huì)遍歷對(duì)象身上的所有屬性，然后挨個(gè)調(diào)用toRef執(zhí)行

到此這篇關(guān)于vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用呢。的文章就介紹到這了,更多相關(guān)vue3 ref，toRef，toRefs內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: