版本
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
值不匹配
在客户端呈现中使用的相同组件不会出现此问题。
9条答案
按热度按时间ghhkc1vu1#
我认为不可能在水合中使用随机值,因为服务器呈现的html应该与客户端生成的html相同。通过使用随机值,您几乎是在强制水合不匹配,因为它们(几乎)总是不同的。但我不明白为什么没有错误
guicsvcw2#
data中val的值是初始化后的某个值,所以当运行$forceUpdate()时不会运行Math.floor(Math.random()* 10000000),val的值不会改变。
sh7euo9m3#
@posva也许我不应该使用
Math.random()
。关键是,如果水合后服务器端的val == X
和客户端的val == Y
,组件的大部分部分都会被动更新,而div
的id
属性则不会。如果有帮助的话,我可以修改示例,使用随机值以外的其他值。但它并没有实质性地改变我所描述的(所谓的)bug。zf2sa74q4#
@cinsanity我不确定我是否理解。我附上了截图,以提供更多细节。
我希望
$forceUpdate()
在强制重新呈现时使所有id值匹配,但它没有。只有更改val
才能成功地同步所有id。0yg35tkg5#
关键是,如果水合后服务器端的瓦尔== X和客户端的val == Y
它必须是真正的后水化。在这种情况下,它可能与这些链接的问题之一#10260(见链接的问题以及)
w8rqjzmb6#
@posva是的,它看起来类似于#10260,但我对Vue内部结构的了解不够,无法确定。
我确实更新了我的repro,使用
Vue.prototype.$isServer
而不是Math.random()
,以获得更大的清晰度。vecaoik17#
我很好奇为什么
$forceUpdate()
不更新div
的id
。eivgtgni8#
我们在创建钩子时遇到了与Nuxt完全相同的问题,我们的解决方法是在挂载的钩子中创建一个新的ID。
dddzy1tm9#
嗨,我遇到了同样的问题
除了必须使用挂载之外,还有其他解决方案吗?
我们为组件生成唯一ID,并将它们用于某些aria属性
如果我们设置这些ID的挂载,我们将失去SEO增益从可访问性属性
编辑:在bug节点上放置一个引用来解决问题