vue3中的ref,toRef,toRefs三個的作用使用小結
1. ref的使用
ref 接受一個原始值，返回一個具有響應式的對象，對象有一個value屬性，其值就是所傳遞的原始值。
ref是做的一個拷貝關系，修改對象msg的值，不會影響對象obj，視圖會發(fā)生變化。
import { ref } from "vue";
let obj = { name: "你好", age: 16 };
let msg = ref(obj.name);
console.log(msg.value); // 你好
let arr = ref([]) // ref 可以是任何類型 也可以是對象
function change1() {
msg.value = "世界";
//修改msg1數(shù)據(jù)的時候必須要加 .value 渲染數(shù)據(jù)的時候就不用加了
console.log(obj, msg.value);
// {name: "你好", age: 16} '世界'
// 數(shù)據(jù)此時沒改變 但是頁面的數(shù)據(jù)改變了
}
change1();
return {
obj,
msg,
};如果給dom上加ref 就是當前的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用來給抽離響應式對象中的某一個屬性，并把該屬性包裹成ref對象，使其和原對象產生鏈接
toRef是做的一種引用關系，修改msg2的值，會影響對象msg，但視圖不會發(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
//此時 msg.ww 數(shù)據(jù)變了 但是視圖上的是不會變的
}
change2()
return { msg2,change2 }
}3. toRefs的使用
toRefs用來把響應式對象轉換成普通對象，把對象中的每一個屬性，包裹成ref對象
toRefs就是toRef的升級版，只是toRefs是把響應式對象進行轉換，其余的特性和toRef無二
setup(){
let msg = { name: 'zs', age: 16 }
let msg3 = toRefs(msg)
console.log(msg) // { name:ref, age:ref } ref代指ref對象
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 }
}請求過來的數(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ù)的時候還是 obj.list = 'aaa'
import { reactive, toRefs } from "vue";
setup() {
let obj = reactive({
list: [],
newS: [],
moods: [],
});
return { ...toRefs(obj) };
},
4.總結
ref、toRef、toRefs 都可以將某個對象中的屬性變成響應式數(shù)據(jù)
ref的本質是拷貝，修改響應式數(shù)據(jù)，不會影響到原始數(shù)據(jù)，視圖會更新
toRef、toRefs的本質是引用，修改響應式數(shù)據(jù)，會影響到原始數(shù)據(jù)，視圖會更新
toRef 一次僅能設置一個數(shù)據(jù)，接收兩個參數(shù)，第一個參數(shù)是哪個對象，第二個參數(shù)是對象的哪個屬性
toRefs接收一個對象作為參數(shù)，它會遍歷對象身上的所有屬性，然后挨個調用toRef執(zhí)行
到此這篇關于vue3中的ref，toRef，toRefs三個是干嘛的，有什么作用呢。的文章就介紹到這了,更多相關vue3 ref，toRef，toRefs內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue使用xlsx導入到表格中代碼,具體實現(xiàn)是先通過FileReader將上傳的文件讀取為二進制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下2023-11-11
這篇文章講給大家詳細介紹一下Vue如何實現(xiàn)登錄后添加動態(tài)路由并跳轉，文章通過代碼示例介紹的非常詳細，對我們的學習或工作有一定的的幫助,需要的朋友可以參考下2023-07-07
vue中$emit傳遞多個參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個參(arguments和$event)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法，需要的朋友參考學習下吧。2017-12-12
本篇文章主要介紹了Vue.js上下滾動加載組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue如何實現(xiàn)拖動圖片進行排序Vue.Draggable
這篇文章主要介紹了vue如何實現(xiàn)拖動圖片進行排序Vue.Draggable，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
本文主要介紹了Vue預覽圖片和視頻的幾種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01