Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
651778286 opened this issue Oct 27, 2021 · 12 comments
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@651778286
Copy link

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
Copy link
Member

posva commented Oct 27, 2021

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!

@posva posva closed this as completed Oct 27, 2021
@651778286
Copy link
Author

@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 ygj6 reopened this Oct 28, 2021
@ygj6 ygj6 added 🐞 bug Something isn't working 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Oct 28, 2021
@ygj6
Copy link
Member

ygj6 commented Oct 28, 2021

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

@posva posva added has workaround A workaround has been found to avoid the problem and removed has workaround A workaround has been found to avoid the problem labels Oct 28, 2021
@651778286
Copy link
Author

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

Will this issue be fixed in the next release?

@Bigfish8
Copy link
Contributor

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

@yjj5855
Copy link

yjj5855 commented Dec 23, 2021

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

@llcat
Copy link

llcat commented Mar 1, 2022

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

@yjj5855
Copy link

yjj5855 commented Mar 1, 2022

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

@llcat
Copy link

llcat commented Mar 1, 2022

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

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

@ychost
Copy link

ychost commented Apr 1, 2022

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

@yyx990803
Copy link
Member

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 yyx990803 added the has workaround A workaround has been found to avoid the problem label May 17, 2022
@yyx990803 yyx990803 added 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Jul 13, 2024
@yyx990803
Copy link
Member

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

@github-actions github-actions bot locked and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants