vue.js - Vue ref 属性在不同环境下的行为差异？

Question

<span :="refApi">区域</span><span ref="ref1">位置</span><span :="{ ref: 'ref2' }">操作</span>const ref1 = ref();const ref2 = ref();const ref3 = ref();const refApi = {  ref: 'ref3'};console.log(ref1, ref2, ref3);

在开发环境下 ref1, ref2, ref3 皆符合预期指向 span 。
但是打包后的生产环境就只有 ref1 正常指向 span , ref2, ref3 皆为 undefined。
为什么表现不一致？

Answer 1

从问题和不同编译环境差异两个角度回答

问题

按我的印象中，不论是 v-bind 还是其缩写 : 都需要对应一个属性吧（还是最新的版本发生了变化？）

如果题主是期望实现动态属性，那也应该这么做：

<span :[key]="refApi"></span>

而不是

<span :="refApi"></span>

而且根据官方文档的描述，ref 理论取值就只有 string | Function

所以理论正确的写法应该是

<template>    <span :ref="refApi">区域</span>    <span ref="ref1">位置</span></template><script>import { ref, onMounted } from 'vue'const ref1 = ref();const ref2 = ref();const refApi = (e) => {  ref2.value = e};// 针对 ref 的操作建议在挂载后访问onMounted(() => {  console.log(ref1.value, ref2.value);})</script>

不同编译环境的差异

至于为什么会出现开发环境能够正常捕获到，但是生产环境失败，个人认为是生产环境下，脚手架或编译工具进行了优化导致的，具体原因恐怕得发个 issue 问官方团队了（如果后续有蹲到具体的产生原因，也可以 @ 我一下）

总之，上方的写法是符合规范的，能够保证编译后在生产环境也正常运行

参考

vue官方文档中关于ref属性的描述
vue官方discord （discord看运气，偶尔不挂梯也能访问）
vue github discussions
vue github issue

Answer 2

在 Vue 3 中，ref 是一个函数，它返回一个响应式引用。这个引用的值是你在调用 ref 函数时传入的参数。在你的代码中，ref1，ref2 和 ref3 都被初始化为对 span 元素的引用。

但是，当你尝试将 ref 作为一个对象的属性时（如 refApi），情况就有些不同了。在这种情况下，refApi.ref 是一个字符串，而不是一个对 span 元素的引用。因此，当你尝试访问 refApi.ref 时，你实际上得到的是一个字符串，而不是一个对 span 元素的引用。

所以，当你试图打印 ref1，ref2 和 ref3 时，你实际上是在打印对 span 元素的引用。在开发环境中，这些引用是有效的，因为你的代码正在运行时，这些元素是存在的。但在生产环境中，由于代码已经被打包和优化，这些引用可能已经失效了，因为元素可能已经被移除或更改了。

这就是为什么在生产环境中，你只能看到 ref1 是有效的，而 ref2 和 ref3 都是 undefined 的原因。