快捷導(dǎo)航

一文帶你了解Vue3中toRef和toRefs的用法

更新時(shí)間：2023年01月30日 16:23:14 作者：前端~

Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來(lái)給大家講解一下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++">增長(zhǎng)年齡</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)功能沒(méi)問(wèn)題，接下來(lái)考慮到代碼優(yōu)化：

那可能會(huì)想到我在return的時(shí)候，麻煩一些，

 return {
      name: person.name,
      age: person.age,
      job: person.job.j1.salary,
    };

但是，這樣操作你會(huì)發(fā)現(xiàn)頁(yè)面不是響應(yīng)式的，數(shù)據(jù)修改頁(yè)面不發(fā)生變化，如下：

接下來(lái)看 toRef的用法：很明顯實(shí)現(xiàn)了效果

 <template>
  <h3>姓名：{{ name }}</h3>
  <h3>年齡：{{ age }}</h3>
  <h3>薪資：{{ salary }}</h3>
  <button @click="name += '!'">修改姓名</button>
  <button @click="age++">增長(zhǎng)年齡</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的用法之后，接下來(lái)來(lái)看一下toRefs的用法吧

到此這篇關(guān)于一文帶你了解Vue3中toRef和toRefs的用法的文章就介紹到這了,更多相關(guān)Vue3 toRef toRefs用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue.js實(shí)現(xiàn)開(kāi)發(fā)購(gòu)物車功能的方法詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)開(kāi)發(fā)購(gòu)物車功能的方法,結(jié)合實(shí)例形式分析了基于vue.js開(kāi)發(fā)的購(gòu)物車功能相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn)，而不是需要先手動(dòng)點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2019-01-01
Vue 項(xiàng)目中遇到的跨域問(wèn)題及解決方法(后臺(tái)php)
這篇文章主要介紹了Vue 項(xiàng)目中遇到的跨域問(wèn)題及解決方法(后臺(tái)php)，前端采用vue框架，后臺(tái)php，具體解決方法，大家參考下本文
2018-03-03
詳解Vue中keep-alive的使用
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下
2023-03-03
vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)
這篇文章主要介紹了vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序,本文給大家介紹了安裝electron有兩種方式，兩種方式創(chuàng)建的項(xiàng)目結(jié)構(gòu)大不相同，需要的朋友可以參考下
2024-03-03
詳解Vue 2.0封裝axios筆記
本篇文章主要介紹了詳解Vue 2.0封裝axios筆記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
簡(jiǎn)單了解Vue computed屬性及watch區(qū)別
這篇文章主要介紹了通過(guò)實(shí)例解析Vue computed屬性及watch區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
uniapp和vue的區(qū)別詳解
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-10-10
element中el-table表頭通過(guò)header-row-style設(shè)置樣式
有些時(shí)候需要給element-ui表頭設(shè)置不同樣式,本文主要介紹了element中el-table表頭通過(guò)header-row-style設(shè)置樣式,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01