vue3 的 ref、isRef、toRef、toRefs、toRaw 詳細介紹

2022 年 9 月 24 日
筆記
vue3, 前端知識分享

ref、isRef、toRef、toRefs、toRaw 看着一堆類似的東西，一個頭兩個大，今天整理一篇文章詳細介紹它們的功能及區別。

1、ref

ref 屬性除了能夠獲取元素外，也可以使用 ref 函數，創建一個響應式數據，當數據值發生改變時，視圖自動更新。

<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是張三')
const chang = () => {
  str.value = '我是鑽石王老五'
  console.log(str.value)
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

2、isRef

檢查變量是否為一個被 ref 包裝過的對象，如果是返回 true ，否則返回 false。

import { ref, isRef, reactive } from 'vue'

let str: string = ref('我是張三')
let num: number = 1
let per = reactive({ name: '代碼女神', work: '程序媛' })

console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3、toRef

創建一個 ref 對象，其 value 值指向另一個對象中的某個屬性。

toRef(obj, key) 將對象中的某個值轉化為響應式數據，分為兩種情況：

toRef 定義原始非響應式數據，修改值時，原始數據和 copy 數據都會變的，但是視圖不更新。

<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
  name: '姓名',
  age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '鑽石王老五'
  name.value = '李四'
  console.log(obj.name) // 李四
  console.log('name', name) // 李四
}
//chang() //DOM掛載前調用
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

　　　　注意：如果是在 DOM 掛載之前調用 chang 方法，改變數值，此時數據和視圖都會發生改變。

toRef 定義原始數據響應式數據，修改值時，原始數據，和 copy 數據都會改變，視圖也會更新。

<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '鑽石王老五'
  name.value = '李四'
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

最終值為「李四」。

4、toRefs

toRefs 用來解構 ref、reactive 包裹的響應式數據。接收一個對象作為參數，遍歷對象上的所有屬性，將對象上的所有屬性變成響應式數據。

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '鑽石王老五'
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

toRefs 解構數據時，如果某些參數作為可選參數，可選參數不存在時就會報錯，如：

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '鑽石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

此時可以使用 toRef 解決此問題，使用 toRef 解構對象某個屬性時，先檢查對象上是否存在該屬性，如果存在就繼承對象上的屬性值，如果不存在就會創建一個。

修改上邊的代碼為：

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '鑽石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5、toRaw

將響應式對象轉為原始對象。做一些不想被監聽的事情，從 ref 或 reactive 得到原始數據。

修改原響應式數據時，toRaw 轉換得到的數據會被修改，視圖也會更新，如：

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '鑽石王老五'
  obj.age++
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
  </div>
</template>

如果修改 toRaw 得到的原始數據，原數據也會被修改，但是視圖不更新。如：

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '鑽石王老五'
  obj.age++
}
const changNew = () => {
  newObj.name = '搞笑'
  console.log('newObj', newObj)
  console.log('obj', obj)
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
    <button @click="changNew">修改</button>
  </div>
</template>

Tags: vue3 前端知識分享