当前位置：首页 > news >正文

vue官网例子讲解2

news 2026/4/15 0:01:38

unref() 是什么

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

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

1. 核心逻辑

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

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

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

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

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

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

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

import{isRef}from'vue'functionuseFeature(input){// 必须先判断类型，再决定怎么取值constvalue=isRef(input)?input.value:input console.log(value)}

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

import{unref}from'vue'functionuseFeature(input){// 无论 input 是 ref 还是普通值，都能直接拿到真实数据constvalue=unref(input)console.log(value)}

3. 代码示例

import{ref,unref}from'vue'constmyRef=ref(100)constmyNum=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) }}。