UI 元素在条件渲染时抖动

Question

我遇到的问题是按钮和链接在状态更改时抖动（单击“注销”按钮时）。我尝试了 v-if 和 v-show，但抖动仍然存在。 问题视频：https://www.veed.io/view/89672f51-f55c-411c-883f-440b02cfa4de?panel=share

<div>
  <div>
      <button @click="setColorTheme()">
          <IconDarkMode />
      </button>
      <div v-if="!signedIn && !pending">
          <NuxtLink to="/sign-in">
              <span>Sign In</span>
              <IconSignIn />
          </NuxtLink>
      </div>
  </div>
  <div
      v-if="signedIn && !pending">
      <NuxtLink to="/profile">
          <span>Profile</span>
          <IconProfile />
      </NuxtLink>
      <button to="/sign-in" @click="signOut">
          <span>Sign Out</span>
          <IconSignOut />
      </button>
  </div>
</div>

我在signOut函数中的

signedIn

状态也有300毫秒的延迟，等待页面转换结束，但抖动仍然存在。

if (res.ok) {
    const data = await res.json();
    state.successMessage = data.message;
    if (route.path === '/') {
        window.location.reload();
    } else {
        window.location.href = '/';
    }
    setTimeout(() => {
        state.signedIn = data.signedIn;
    }, 300);
}

寻找可能的解决方案。

Answer 1

我认为问题在于按钮的元素属性“to”与单击事件。 这是您应该尝试的逻辑示例：

signOut() {
  try {
    // first handle your logic
    // request logout from server
    // delete cookies and sesion
    // after success push to route and then change signedIn state(if its not a dynamic value)
    router.push("/sign-in");
    signedIn.value = false
  } catch (error) {
    console.log("logout::error", error);
  }
},

首先处理你的注销逻辑，成功后你处理路线和其他状态，如果

to="sign-in"

中的逻辑是异步函数，请不要使用

click

。

我还建议在按钮上添加淡入淡出动画，这将有助于防止抖动。