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