快捷導(dǎo)航

Vue toRef toRefs toRaw函數(shù)使用示例

更新時(shí)間：2023年03月09日 09:33:36 作者：劍九六千里

這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1. toRef

將一個(gè)對(duì)象中的屬性轉(zhuǎn)換成單獨(dú)的響應(yīng)式引用
接收兩個(gè)參數(shù)：參數(shù)一 => 對(duì)象參數(shù)二 => 屬性
轉(zhuǎn)換后的響應(yīng)式引用會(huì)跟蹤原始屬性的變化
轉(zhuǎn)換后的響應(yīng)式可以被用于計(jì)算屬性及監(jiān)聽(tīng)器中

使用toRef函數(shù)

<template>
  <div class="wrapper">
    <button @click="handleClick">修改</button>
    <div>countRef: {{ countRef }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = {
  name: '張三',
  count: 0
}
let countRef = toRef(obj, 'count')
const handleClick = () => {
  countRef.value++
  console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

原對(duì)象為非響應(yīng)式，改變后，值會(huì)改變，但頁(yè)面不會(huì)更新

原對(duì)象是響應(yīng)式，改變后，值改變，頁(yè)面也會(huì)更新

<template>
  <div class="wrapper">
    <button @click="handleClick">修改</button>
    <div>countRef: {{ countRef }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = reactive({
  name: '張三',
  count: 0
})
let countRef = toRef(obj, 'count')
const handleClick = () => {
  countRef.value++
  console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

2. toRefs

將一個(gè)對(duì)象的所有屬性變成響應(yīng)式引用
接收一個(gè)對(duì)象
追蹤原對(duì)象的引用關(guān)系
原對(duì)象如果是響應(yīng)式的，那么修改值會(huì)更新，視圖會(huì)刷新
原對(duì)象如果非響應(yīng)式，那么修改值會(huì)更新，視圖不會(huì)更新

使用toRefs函數(shù)

<template>
  <div>
    <button @click="handleClick">修改</button>
    <div>num: {{ num }}</div>
    <div>count: {{ count }}</div>
    <div>age: {{ age }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
let obj = reactive({
  num: 0,
  count: 0,
  age: 0
})
let { num, count, age } = toRefs(obj)
const handleClick = () => {
  num.value++
  console.log(num.value, 'num.value');
  count.value++
  console.log(count.value, 'count.value');
  age.value++
  console.log(age.value, 'age.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

3. toRaw

將一個(gè)響應(yīng)式對(duì)象變成非響應(yīng)式
修改值會(huì)更新，視圖不會(huì)刷新

使用toRaw函數(shù)

<template>
  <div>
    <button @click="handleClick">修改</button>
    <div>num: {{ num }}</div>
    <div>count: {{ count }}</div>
    <div>age: {{ age }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue';
let obj = reactive({
  num: 0,
  count: 0,
  age: 0
})
let { num, count, age } = toRaw(obj)
const handleClick = () => {
  num++
  console.log(num, 'num');
  count++
  console.log(count, 'count');
  age++
  console.log(age, 'age');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

總結(jié)：這篇文章介紹了Vue3中將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為響應(yīng)式引用的toRef函數(shù)和用于將多個(gè)響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為響應(yīng)式引用的toRefs函數(shù)，以及用于獲取響應(yīng)式對(duì)象的原始對(duì)象的toRaw函數(shù)。這些函數(shù)可以幫助我們快速創(chuàng)建響應(yīng)式數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的自動(dòng)更新。需要注意的是，使用toRaw函數(shù)獲取一個(gè)響應(yīng)式對(duì)象的原始對(duì)象是不推薦的做法，因?yàn)樵紝?duì)象不具備響應(yīng)式的特性，對(duì)原始對(duì)象的修改不會(huì)觸發(fā)相應(yīng)的依賴更新。

到此這篇關(guān)于Vue toRef toRefs toRaw函數(shù)使用示例的文章就介紹到這了,更多相關(guān)Vue toRef toRefs toRaw內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: