Vue 3中unref的写法

唐人街都是苦瓜脸2025-06-21 11:31

Vue3中unref的写法

在工作学习前端的过程中见到了这样一种写法，于是我就探究了一下

javascript 复制代码

unref(editForm).open()

1. editForm

editForm 是通过 ref 创建的响应式引用对象。在 Vue 3 里，ref 常被用于创建包含单个值的响应式引用，这个值可以是基础类型，也能是对象。在当前代码里，editForm 用于引用组件实例。

javascript 复制代码

const editForm = ref()

2. unref

unref 是 Vue 3 提供的一个工具函数，其作用是获取 ref 对象的值。若传入的参数是 ref 对象，就返回其内部的值；若不是 ref 对象，则直接返回该参数本身。这一函数等同于 isRef(val) ? val.value : val。

javascript 复制代码

import { unref } from 'vue'

3. unref(editForm)

unref(editForm) 会尝试获取 editForm 这个 ref 对象的值，也就是组件的实例。若 editForm 并非 ref 对象，就直接返回 editForm 本身。

4. .open()

.open() 是调用组件实例上的 open 方法。一般而言，这个方法的作用是打开编辑表单，可能用于新增或者编辑操作。

完整代码含义

unref(editForm).open() 整体的作用是获取组件的实例，接着调用该组件实例上的 open 方法，以此来打开编辑表单。

代码示例

下面是一个简化示例，展示 unref(editForm).open() 的使用方式：

javascript 复制代码

<template>
  <BasePage>
    <Button @click="add">新增</Button>
    <EditForm ref="editForm" />
  </BasePage>
</template>

<script setup>
import { ref, unref } from 'vue'
import EditForm from './edit-form.vue'

const editForm = ref()

const add = () => {
  // 获取 EditForm 组件实例并调用 open 方法
  unref(editForm).open()
}
</script>

注意事项

运用 unref(editForm).open() 时，要保证 editForm 引用的组件已经挂载，并且该组件存在 open 方法，不然就会引发运行时错误。可以在调用前添加空值检查，从而避免错误：

javascript 复制代码

const add = () => {
  const formInstance = unref(editForm)
  if (formInstance && typeof formInstance.open === 'function') {
    formInstance.open()
  }
}