Nuxt 3组件中变量值不一致问题：登录/注册表单切换时占位符数据不匹配

兄弟，我来帮你捋捋这个问题的根源哈～

你现在的代码里，cDummy是在组件初始化的时候（也就是页面加载时）一次性随机选好的一条数据。正常来说，只要组件不被销毁重建，名字和邮箱的占位符应该始终是匹配的，但之所以会出现“邮箱是高斯的，名字却是欧几里得”这种情况，大概率是你的组件在切换isLogin状态时被意外销毁并重新创建了——比如组件外层有v-if、动态路由切换，或者Nuxt开发模式下的热更新导致组件重新挂载，这时候<script setup>会重新执行，cDummy就会再随机选一条新数据，但可能因为DOM更新的时序问题，出现新旧数据混在一起的情况。

那怎么解决呢？分两种情况来处理：

情况一：希望名字和邮箱始终用同一份随机数据（页面加载时确定） #

这种情况下，你要确保组件不会被意外销毁重建。检查一下组件的外层结构，有没有用v-if控制整个组件的显示，或者有没有其他会触发组件卸载的逻辑。只要组件实例一直存在，cDummy就只会初始化一次，名字和邮箱就永远是匹配的。

情况二：希望每次切换登录/注册模式时都刷新一套新的匹配数据 #

那你需要把cDummy改成响应式变量，并且在切换模式的时候重新生成随机数据。调整后的代码大概是这样：

<script setup lang="ts">
const isLogin = ref(true);
const dummyData = [
  ['Euclid', 'euclid@greece.old'],
  ['Gauss', 'gauss@math.king'],
  ['Einstein', 'albert@relative.phys'],
];

// 封装生成随机dummy数据的方法
const getRandomDummy = () => {
  return dummyData[Math.floor(Math.random() * dummyData.length)];
};

// 用ref让cDummy变成响应式变量，初始化时生成一次
const cDummy = ref(getRandomDummy());

// 切换模式的方法：同时更新状态和dummy数据
const toggleMode = () => {
  isLogin.value = !isLogin.value;
  cDummy.value = getRandomDummy();
};
</script>

<template>
  <label v-if="!isLogin">
    <div>Name</div>
    <input type="text" :placeholder="cDummy[0]" required>
  </label>
  <label>
    <div>Email</div>
    <input type="email" :placeholder="cDummy[1]" required>
  </label>
  <a @click="toggleMode">{{ modeLabels.switchText }}</a>
</template>

这样每次点击切换按钮时，都会重新生成一套匹配的名字和邮箱，就再也不会出现不匹配的问题啦～

备注：内容来源于stack exchange，提问作者CMTV