vue 节点属性值在客户端水合后不起作用

zd287kbt  于 2022-10-28  发布在  其他
关注(0)|答案(9)|浏览(168)

版本

2.6.11

复制链接

https://codesandbox.io/s/ssr-reactivity-up6nh?file=/pages/index.vue的最大值

重现步骤

  • div的id属性与组件中的myid值不匹配(有时在首次加载时需要刷新页面)。
  • 请注意,$forceUpdate()(第一个按钮)不会更新div的id属性
  • 更改val data(第二个按钮)属性的值会触发React性

需要什么?

myid计算属性的每个引用都应匹配

到底发生了什么?

div的ID属性与myid值不匹配
在客户端呈现中使用的相同组件不会出现此问题。

ghhkc1vu

ghhkc1vu1#

我认为不可能在水合中使用随机值,因为服务器呈现的html应该与客户端生成的html相同。通过使用随机值,您几乎是在强制水合不匹配,因为它们(几乎)总是不同的。但我不明白为什么没有错误

guicsvcw

guicsvcw2#

data中val的值是初始化后的某个值,所以当运行$forceUpdate()时不会运行Math.floor(Math.random()* 10000000),val的值不会改变。

sh7euo9m

sh7euo9m3#

@posva也许我不应该使用Math.random()。关键是,如果水合后服务器端的val == X和客户端的val == Y,组件的大部分部分都会被动更新,而divid属性则不会。如果有帮助的话,我可以修改示例,使用随机值以外的其他值。但它并没有实质性地改变我所描述的(所谓的)bug。

zf2sa74q

zf2sa74q4#

@cinsanity我不确定我是否理解。我附上了截图,以提供更多细节。

我希望$forceUpdate()在强制重新呈现时使所有id值匹配,但它没有。只有更改val才能成功地同步所有id。

0yg35tkg

0yg35tkg5#

关键是,如果水合后服务器端的瓦尔== X和客户端的val == Y
它必须是真正的水化。在这种情况下,它可能与这些链接的问题之一#10260(见链接的问题以及)

w8rqjzmb

w8rqjzmb6#

@posva是的,它看起来类似于#10260,但我对Vue内部结构的了解不够,无法确定。
我确实更新了我的repro,使用Vue.prototype.$isServer而不是Math.random(),以获得更大的清晰度。

vecaoik1

vecaoik17#

我很好奇为什么$forceUpdate()不更新divid

eivgtgni

eivgtgni8#

我们在创建钩子时遇到了与Nuxt完全相同的问题,我们的解决方法是在挂载的钩子中创建一个新的ID。

dddzy1tm

dddzy1tm9#

嗨,我遇到了同样的问题
除了必须使用挂载之外,还有其他解决方案吗?
我们为组件生成唯一ID,并将它们用于某些aria属性
如果我们设置这些ID的挂载,我们将失去SEO增益从可访问性属性
编辑:在bug节点上放置一个引用来解决问题

相关问题