项目编译后，component标签上ref属性对应的响应式对象为空，开发环境下正常

[651778286]

Version

3.2.20

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1、在开发环境下，切换分页后，当前分页的ref对象（Home_View.value/Posts_View.value/Archive_View.value）不为空

2、运行vite build进行编译之后，部署到服务器上运行，切换分页后，当前分页的ref对象为空

What is expected?

编译后ref对象不为空

What is actually happening?

编译后ref对象为空

[posva]

This is not a valid reproduction but I noticed in your code you should use markRaw() in your components if you pass to them to reactive functions like ref or computed;

import _HomeView from './HomeView.vue'

const HomeView = markRaw(_HomeView)

const currentTabComponent = computed(() => {
  switch (currentTab.value) {
    case 'Home'    : return HomeView
    case 'Posts'   : return PostsView
    case 'Archive' : return ArchiveView
  }
})

Remember to use the forum or the Discord chat to ask questions!

[651778286]

@posva Thank you for your reply, but this plan did not work.

<component :is="currentTabComponent" :ref="currentTabRef"></component>

const currentTabRef       = computed(() => currentTab.value + '_View')

const Home_View    = ref(null)
const Posts_View   = ref(null)
const Archive_View = ref(null)
const logRef = () => {
  console.log(Home_View.value, Posts_View.value, Archive_View.value)
}
onMounted(() => {
  setInterval(logRef, 1000)
})

The component ref attribute is obtained by currentTabRef function and the corresponding $refs object(Home_View、Posts_View、Archive_View) is defined also

Log Home_View.value, Posts_View.value, and Archive_View.value per second.

In dev environment, Home_View.value，Posts_View.value and Archive_View.value get the correct values，but after build, Home_View.value，Posts_View.value and Archive_View.value is always null

[ygj6]

I simplified it sfc.vuejs.org/
This is the #4549 missing scene 😭

[651778286]

我把它简化了sfc.vuejs.org/ 这是#4549 缺失的场景😭

Will this issue be fixed in the next release?

[Bigfish8]

It seems can not compile the template inside setup when there exists dynamic ref...

[yjj5855]

@651778286 不只有refs有问题 , 我在setup script 中 const _bill = inject('bill') , 在script 中 也获取不到.
都是开发环境正常, 发布环境undefined
不知道是不是vite的问题 我也提到vite了 vitejs/vite#6244

[llcat]

@yjj5855 解决了吗? 我也是碰到了这个问题, 从vite的issue过来的 我的版本是 "vue": "^3.2.25", "vite": "^2.7.2",

[yjj5855]

@llcat setup script 和 普通script 中的数据不互通目前看来, 一个vue文件只能写一种script, 文档中没有明确说明容易给人错觉

[llcat]

@llcat setup script 和 普通script 中的数据不互通目前看来, 一个vue文件只能写一种script, 文档中没有明确说明容易给人错觉

是的, 翻了几个issue, debug后发现确实不互通, 主要是setup()在options api中的行为和<script setup>也不一致, setup()中返回的变量可以读取好像是存在setupState中的, 文档中没有提及到不互通, 导致我误以为在option api中可以获取， 最好的实践是在一个SFC中要么用composition api， 要么用options api，不要混着用

[ychost]

我也遇到了，只有部分浏览器是 undefined
M1 Chrome ❌
M1 Edge ✅
X86 Chrome ✅
X86 Mac ❎
@yjj5855

[yyx990803]

This is a design flaw in the way dynamic refs are handled in <script setup> - we may need to rethink the syntax in the future.

For now, the workaround is to create a plain object to hold the refs:

Workaround 1

Workaround 2

[yyx990803]

Closing this as a duplicate of #11373 for better tracking as the new one is in English