一文帶你了解Vue3中toRef和toRefs的用法
更新時間：2023年01月30日 16:23:14 作者：前端~
Vue3中toRef、toRefs都是與響應式數(shù)據(jù)相關的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧
toRef 顧名思義，不是ref 響應式數(shù)據(jù)，給它轉成ref 響應式數(shù)據(jù)
通俗易懂的理解：
<template>
<h3>姓名：{{ person.name }}</h3>
<h3>年齡：{{ person.age }}</h3>
<h3>薪資：{{ person.job.j1.salary }}</h3>
<button @click="person.name += '!'">修改姓名</button>
<button @click="person.age++">增長年齡</button>
<button @click="person.job.j1.salary++">漲薪</button>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
let person = reactive({
name: "張三",
age: 18,
job: {
j1: {
salary: 20,
},
},
});
return {
person,
};
},
};
</script>
<style>
</style>首先實現(xiàn)功能沒問題，接下來考慮到代碼優(yōu)化：
那可能會想到 我在return的時候，麻煩一些，
return {
name: person.name,
age: person.age,
job: person.job.j1.salary,
};
但是，這樣操作你會發(fā)現(xiàn)頁面不是響應式的，數(shù)據(jù)修改頁面不發(fā)生變化，如下：
接下來看 toRef的用法： 很明顯實現(xiàn)了效果
<template>
<h3>姓名：{{ name }}</h3>
<h3>年齡：{{ age }}</h3>
<h3>薪資：{{ salary }}</h3>
<button @click="name += '!'">修改姓名</button>
<button @click="age++">增長年齡</button>
<button @click="salary++">漲薪</button>
</template>
<script>
import { reactive, toRef } from "vue";
export default {
setup() {
let person = reactive({
name: "張三",
age: 18,
job: {
j1: {
salary: 20,
},
},
});
return {
name: toRef(person, "name"),
age: toRef(person, "age"),
salary: toRef(person.job.j1, "salary"),
};
},
};
</script>
<style>
</style>
介紹完toRef的用法之后，接下來來看一下toRefs的用法吧
到此這篇關于一文帶你了解Vue3中toRef和toRefs的用法的文章就介紹到這了,更多相關Vue3 toRef toRefs用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue監(jiān)聽器簡單使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue中@change兼容問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vite+Electron快速構建VUE3桌面應用的實現(xiàn)
本文主要介紹了Vite+Electron快速構建VUE3桌面應用的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
如何使用vuejs實現(xiàn)更好的Form validation?
如何使用vuejs實現(xiàn)更好的Form validation？這篇文章主要介紹了vue-form插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實例代碼
選擇省市區(qū)是我們大家在填寫地址的時候經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關于利用vue.js模仿實現(xiàn)京東省市區(qū)三級聯(lián)動選擇組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
vue開發(fā)h5項目特別是移動端的項目，很多都是打包后掛載在原生APP上的，這篇文章主要介紹了vue與原生app的對接交互的方法，非常具有實用價值，需要的朋友可以參考下2018-11-11
vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能實例詳解
本文通過實例代碼給大家介紹了vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue中使用kindeditor富文本編輯器的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue 使用ref 讓父組件調(diào)用子組件的方法,需要的朋友可以參考下2018-02-02
Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應用的具體需求和頁面間的關系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學跟著小編來看看吧2024-04-04