<div id="review-modal" class="review-modal dialog-panda-skip" :class="{ hidden: !isModalShow }">

原因是 Vue 实例初始化前,Wordpress就已经渲染DOM了,此时 hidden 类或动态绑定还未被vue执行生效。因此DOM 中也没有 hidden 类,弹窗就会先显示,直到 Vue 编译完成后才会根据 isModalShow: false 添加上 hidden,造成短暂闪烁。
v-show
解决闪烁问题
<div id="review-modal" class="review-modal dialog-panda-skip" :class="{ hidden: !isModalShow }" v-cloak>
v-cloak 指令:Vue 编译完成前,v-cloak 会保留在元素上,通过 CSS 强制隐藏;编译完成后,Vue 会自动移除 v-cloak,此时 v-show 已生效,避免了未编译时的短暂显示。
配合 CSS 增加 v-cloak 样式(确保 Vue 编译前元素不显示)
[v-cloak] {
display: none !important;
}