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创建的代理对象中的原始值，在函数中的使用也是非常灵活实用的。