快捷導(dǎo)航

vue3中toRef、toRefs和toRaw的使用

更新時間：2024年05月13日 11:59:29 作者：猛扇趙四那半好嘴

本文主要介紹了vue3中toRef、toRefs和toRaw的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.toRef

toRef 的作用是將一個響應(yīng)式對象中的屬性轉(zhuǎn)換成單獨的響應(yīng)式引用。轉(zhuǎn)換后的響應(yīng)式引用會跟蹤原始屬性的變化。轉(zhuǎn)換后的響應(yīng)式可以被用于計算屬性及監(jiān)聽器中。

如果原始對象是非響應(yīng)式的則不會更新視圖，數(shù)據(jù)會改變。

接收兩個參數(shù)：

參數(shù)一：原始對象；
參數(shù)二：屬性。

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change">點擊</button>
  </div>
</template>

<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'

const man = reactive({ name: '張三', age: 18, like: '唱' })
const like = toRef(man, 'like')
const change = () => {
  man.age = 19
  like.value = '跳'
  console.log(man)
}
</script>

點擊前頁面：

點擊后結(jié)果：

2.toRefs

toRefs 將一個對象的所有屬性變成響應(yīng)式引用，追蹤原對象的引用關(guān)系。

原始對象如果是響應(yīng)式的，則當(dāng)修改屬性值時，數(shù)據(jù)和視圖都會更新；原對象如果非響應(yīng)式，則修改屬性值時，數(shù)據(jù)會更新，視圖不更新。

接收一個參數(shù)：原始對象。

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change2">點擊2</button>
  </div>
</template>

<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'

const man = reactive({ name: '張三', age: 18, like: '唱' })
const { name, age } = toRefs(man)
const change2 = () => {
  name.value = '李四'
  age.value = 20
}
</script>

<style scoped></style>

點擊前頁面：

點擊后結(jié)果：

3.toRaw

toRaw 將一個響應(yīng)式對象變成非響應(yīng)式。修改屬性值時，數(shù)據(jù)會改變，視圖不會更新。

接受一個參數(shù)：原始對象。

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change3">點擊3</button>
  </div>
</template>

<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'

const man = reactive({ name: '張三', age: 18, like: '唱' })
const change3 = () => {
  // 手寫toRaw
  console.log(man['__v_raw'])
  // 調(diào)用toRaw
  console.log(toRaw(man))
}
</script>

點擊前與點擊后頁面：