Vue的toRef、toRefs和toRaw函數如何使用

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

1. toRef

• 將一個對象中的屬性轉換成單獨的響應式引用

• 接收兩個參數：參數一 => 對象 參數二 => 屬性

• 轉換后的響應式引用會跟蹤原始屬性的變化

• 轉換后的響應式可以被用于計算屬性及監聽器中

使用toRef函數

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

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

原對象是響應式，改變后，值改變，頁面也會更新

<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

• 將一個對象的所有屬性變成響應式引用

• 接收一個對象

• 追蹤原對象的引用關系

• 原對象如果是響應式的，那么修改值會更新，視圖會刷新

• 原對象如果非響應式，那么修改值會更新，視圖不會更新

使用toRefs函數

<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

• 將一個響應式對象變成非響應式

• 修改值會更新，視圖不會刷新

使用toRaw函數

<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函數如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。