Vue的toRef、toRefs和toRaw函數(shù)如何使用

今天小編給大家分享一下Vue的toRef、toRefs和toRaw函數(shù)如何使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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)聽器中

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

以上就是“Vue的toRef、toRefs和toRaw函數(shù)如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。