快捷導(dǎo)航

vue3中toRef、toRefs和toRaw的使用

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

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

1.toRef

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

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

接收兩個(gè)參數(shù)：

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

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change">點(diǎn)擊</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>

點(diǎn)擊前頁面：

點(diǎn)擊后結(jié)果：

2.toRefs

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

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

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

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change2">點(diǎn)擊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>

點(diǎn)擊前頁面：

點(diǎn)擊后結(jié)果：

3.toRaw

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

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

<template>
  <div>
    {{ man }}
  </div>
  <br />
  <div>
    <button @click="change3">點(diǎn)擊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>

點(diǎn)擊前與點(diǎn)擊后頁面：