快捷導(dǎo)航

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

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

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

1. toRef

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

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

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

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

<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

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

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

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

使用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)式對象的屬性轉(zhuǎn)換為響應(yīng)式引用的toRef函數(shù)和用于將多個響應(yīng)式對象的屬性轉(zhuǎn)換為響應(yīng)式引用的toRefs函數(shù)，以及用于獲取響應(yīng)式對象的原始對象的toRaw函數(shù)。這些函數(shù)可以幫助我們快速創(chuàng)建響應(yīng)式數(shù)據(jù)，實現(xiàn)數(shù)據(jù)的自動更新。需要注意的是，使用toRaw函數(shù)獲取一個響應(yīng)式對象的原始對象是不推薦的做法，因為原始對象不具備響應(yīng)式的特性，對原始對象的修改不會觸發(fā)相應(yīng)的依賴更新。

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

您可能感興趣的文章: