快捷導(dǎo)航

Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式

更新時間：2024年03月18日 10:06:27 作者：小饅頭學(xué)python

這篇文章主要介紹了Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

回顧響應(yīng)式對象

在介紹知識點(diǎn)之前，我們準(zhǔn)備好初始代碼

<template>
<h2>姓名：{{ person.name }}</h2>
<h2>姓名：{{ person.age }}</h2>
<button @click="change_name">修改名字</button>
<button @click="change_age"></button>
 </template>
 
 <script lang="ts" setup name="Person11">
  import {reactive} from 'vue'
  
 let person = reactive({
  name:'饅頭',
  age:22
 })
 function change_name(){
  person.name += '*'
 }

 function change_age(){
  person.age += 1
 }

 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

運(yùn)行結(jié)果如下

請?zhí)砑訄D片描述

是否和你想的一樣呢，我們使用了reactive進(jìn)行創(chuàng)建響應(yīng)式對象

接下來我們對person進(jìn)行解構(gòu)賦值

或許有些人不太理解解構(gòu)賦值，我從網(wǎng)上找了一段話

解構(gòu)賦值是 JavaScript 中一種方便的語法，用于從數(shù)組或?qū)ο笾刑崛?shù)據(jù)并賦值給變量。通過解構(gòu)賦值，可以輕松地提取數(shù)組中的元素或?qū)ο笾械膶傩?，使代碼更簡潔易讀。
它還可以嵌套使用，處理復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，但要注意避免過度解構(gòu)，以保持代碼的可讀性。

接下來我們看看代碼中如何操作，只需在數(shù)據(jù)下面加一行

let {name,age} = person

接下來我們修改方法中的部分代碼

//原代碼
function change_name(){
          person.name += '*'
        }

        function change_age(){
          person.age += 1
        }
//修改之后的代碼
function change_name(){
          name += '*'
        }

        function change_age(){
          age += 1
        }

這樣我們的頁面是否還會響應(yīng)呢，答案是不可以

請?zhí)砑訄D片描述

如果我們再修改模板里面的內(nèi)容呢

<h2>姓名：{{ name }}</h2>
<h2>姓名：{{ age }}</h2>

答案也是不更新的，但是數(shù)據(jù)究竟改沒改呢，我們打印一下

function change_name(){
          name += '*'
          console.log(name)
        }

        function change_age(){
          age += 1
          console.log(age)
        }

控制臺結(jié)果顯示如下，所以說是改了的

接下來我們解釋一下

let {name,age} = person

上面這行代碼和下面兩行代碼其實(shí)是等價的

let name=person.name
let age=person.age

同時我們要明確一點(diǎn)，下圖的數(shù)據(jù)是響應(yīng)式的

但是我們解構(gòu)后相當(dāng)于自己重新定義了一個對象name和age，然后person.name和person.age是不變的

多說無益，我們測試一下叭

function change_name(){
          name += '*'
          console.log(name, person.name)
        }

結(jié)果顯然了叭，結(jié)論就是：響應(yīng)式對象解構(gòu)出的并非是響應(yīng)式對象

介紹toRefs

承接上個標(biāo)題，我們?nèi)绻胍獙⒔鈽?gòu)的對象變?yōu)轫憫?yīng)式的，我們應(yīng)該怎么做呢，只需要import一個toRefs

import {reactive,toRefs} from 'vue'

同時我們再將解構(gòu)的person包裹一下toRefs

let {name,age} = toRefs(person)

這樣的意思就是，將解構(gòu)的數(shù)據(jù)變?yōu)镽ef定義的響應(yīng)式對象，將reactive對象變?yōu)镽ef對象

接下來我們改一下方法

function change_name(){
          name.value += '*'
          console.log(name, person.name)
        }

        function change_age(){
          age.value += 1
          console.log(age)
        }

這樣我們再測試一下

請?zhí)砑訄D片描述