Vue Unref：解析Vue 3 Composition API中的Unref函數

在Vue 3 Composition API中，推出了新的工具函數Unref，它允許我們從ref、reactive或readonly代理中獲取原始值。

一、什麼是Unref

在Vue 3 Composition API中使用ref、reactive或readonly創建的響應式數據是代理對象，使用Unref函數可以獲取這些代理對象中的原始值。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello World')
const rawMessage = unref(message)
</script>

在以上代碼中，使用Unref函數從ref對象中獲取原始值，並將其賦值給了rawMessage變量。

二、Unref的使用場景

1.使用ref、reactive或readonly創建的響應式數據

在使用ref、reactive或readonly創建響應式數據時，它們會返回一個代理對象，而不是原始值。如果需要訪問原始值，可以使用Unref函數獲取。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello World')
const rawMessage = unref(message)

console.log(typeof message) // "object"
console.log(typeof rawMessage) // "string"
</script>

在上述代碼中，message是一個代理對象，而rawMessage是message對象的原始值。

2.在自定義函數中使用

在自定義函數中可以使用Unref函數將代理對象轉換為原始值，然後進行對原始值的操作。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello World')

function showMessage(message) {
  console.log(`Message: ${unref(message)}`)
}

showMessage(message)
</script>

在以上代碼中，Unref函數將代理對象message轉換為原始值，然後將其傳遞給showMessage函數進行處理。

3.多重嵌套數據結構中使用

在多重嵌套數據結構中使用時，Unref函數可以便捷地獲取想要的原始值。

<template>
  <p>{{userInfo.name}}</p>
  <p>{{userInfo.age}}</p>
  <p>{{userInfo.position}}</p>
</template>

<script setup>
import { reactive } from 'vue'

const userInfo = reactive({
  name: 'John Doe',
  age: 30,
  job: {
    position: 'Web Developer'
  }
})

const position = unref(userInfo.job.position)

console.log(position) // "Web Developer"
</script>

在以上代碼中，使用Unref函數獲取userInfo對象中嵌套的job對象的position屬性。

三、Unref與ToRef的區別

Unref函數和ToRef函數都是Vue 3 Composition API中響應式數據工具函數，但它們的作用不同。

ToRef函數可以將原始數據轉換為ref對象，而Unref函數是將ref、reactive或readonly創建的代理對象轉換為原始值。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { ref, toRef } from 'vue'

const rawMessage = "Hello World"
const message = toRef(rawMessage)

console.log(typeof message) // "object"
console.log(message.value) // "Hello World"
console.log(unref(message)) // "Hello World"
</script>

在以上代碼中，使用ToRef函數將原始字符串轉換為ref對象，並且可以通過.value屬性來訪問原始值。

四、Unref函數的注意事項

在使用Unref函數時需要注意以下幾點：

1.當傳遞的值是一個原始值時，Unref函數會返回該值

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { unref } from 'vue'

const message = 'Hello World'
const rawMessage = unref(message)

console.log(message) // "Hello World"
console.log(rawMessage) // "Hello World"
</script>

在以上代碼中，Unref函數返回的是原始值message本身。

2.當傳遞的值是一個Promise時，Unref函數會等待Promise的值完成

在使用Unref函數獲取一個Promise時，Unref函數會等待Promise的值完成，並返回Promise的結果。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { unref } from 'vue'

const message = Promise.resolve('Hello World')
const rawMessage = unref(message)

console.log(rawMessage) // "Hello World"
</script>

3.當傳遞的值是一個ref時，使用Unref函數可以忽略.value屬性

使用Unref函數獲取ref對象時，可以忽略.value屬性，而直接返回ref對象的原始值。

<template>
  <p>{{message}}</p>
</template>

<script setup>
import { ref, unref } from 'vue'

const message = ref('Hello World')
const rawMessage = unref(message)

console.log(typeof message) // "object"
console.log(typeof rawMessage) // "string"
</script>

五、結論

Unref函數是Vue 3 Composition API中非常實用的工具函數，可以很方便地獲取ref、reactive或readonly創建的代理對象中的原始值，在函數中的使用也是非常靈活實用的。