Vue3之toRefs和toRef在reactive中的一些應用方式

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

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

回顧響應式對象

在介紹知識點之前，我們準備好初始代碼

<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>

運行結果如下

請?zhí)砑訄D片描述

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

接下來我們對person進行解構賦值

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

解構賦值是 JavaScript 中一種方便的語法，用于從數(shù)組或對象中提取數(shù)據(jù)并賦值給變量。通過解構賦值，可以輕松地提取數(shù)組中的元素或對象中的屬性，使代碼更簡潔易讀。
它還可以嵌套使用，處理復雜的數(shù)據(jù)結構，但要注意避免過度解構，以保持代碼的可讀性。

接下來我們看看代碼中如何操作，只需在數(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
        }

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

請?zhí)砑訄D片描述

如果我們再修改模板里面的內容呢

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

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

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

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

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

接下來我們解釋一下

let {name,age} = person

上面這行代碼和下面兩行代碼其實是等價的

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

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

但是我們解構后相當于自己重新定義了一個對象name和age，然后person.name和person.age是不變的

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

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

結果顯然了叭，結論就是：響應式對象解構出的并非是響應式對象

介紹toRefs

承接上個標題，我們如果想要將解構的對象變?yōu)轫憫降?，我們應該怎么做呢，只需要import一個toRefs

import {reactive,toRefs} from 'vue'

同時我們再將解構的person包裹一下toRefs

let {name,age} = toRefs(person)

這樣的意思就是，將解構的數(shù)據(jù)變?yōu)镽ef定義的響應式對象，將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片描述