vue官网例子讲解2

unref() 是什么

unref() 是 Vue 3 提供的一个辅助工具函数 ，它的核心作用可以概括为："如果是 ref 就取值，不是 ref 就直接返回"。

你可以把它看作是 .value 的智能语法糖，用来解决"不确定变量是否为 ref"时的取值问题。

1. 核心逻辑

unref(val) 的内部逻辑非常简单，等价于下面这行代码：

javascript 复制代码

// unref 的伪代码逻辑
const result = isRef(val) ? val.value : val

如果传入的是 ref ：它会自动返回 ref.value（即内部存储的真实值）。
如果传入的是普通值：它会直接返回该值本身。

2. 为什么要用它？（使用场景）

在封装通用函数 或**组合式函数（Composables）**时，unref 非常有用。

假设你正在写一个通用的 useFeature 函数，它接收一个参数 input。你希望这个函数足够灵活：既能接收 ref(1)，也能接收普通数字 1。

如果不使用 unref，你需要这样写（很麻烦）：

javascript 复制代码

import { isRef } from 'vue'

function useFeature(input) {
  // 必须先判断类型，再决定怎么取值
  const value = isRef(input) ? input.value : input
  console.log(value)
}

使用 unref，代码会非常简洁：

javascript 复制代码

import { unref } from 'vue'

function useFeature(input) {
  // 无论 input 是 ref 还是普通值，都能直接拿到真实数据
  const value = unref(input)
  console.log(value)
}

3. 代码示例

javascript 复制代码

import { ref, unref } from 'vue'

const myRef = ref(100)
const myNum = 50

// ✅ 场景 1：传入 ref，自动解包
console.log(unref(myRef)) // 输出: 100 (等同于 myRef.value)

// ✅ 场景 2：传入普通值，直接返回
console.log(unref(myNum)) // 输出: 50

4. 注意事项

失去响应性 ：unref() 只是获取当前的值 （快照）。如果你把 unref(myRef) 的结果赋值给另一个变量，这个新变量不会随 myRef 的变化而更新。如果你需要保持响应式连接，请直接使用 ref 本身，不要解包。
模板中不需要 ：在 Vue 的模板（<template>）中，Vue 会自动帮你解包 ref，所以模板里直接使用 {``{ count }} 即可，不需要写 {``{ unref(count) }}。

总结：当你写代码时不确定手里的变量是不是 ref，或者想让函数同时兼容 ref 和普通值时，用 unref() 是最安全、最简洁的选择。

vue官网例子 讲解2

unref() 是什么

1. 核心逻辑

2. 为什么要用它？（使用场景）

3. 代码示例

4. 注意事项

vue官网例子讲解2