Vue如何仅在组件加载时绑定class实现已填表单区块初始折叠

核心是把初始加载时刻的区块填写状态存成固定快照，完全断开和后续实时表单数据的响应式联动，从根源上满足“只在加载时判断一次，后续不管表单值怎么变都不自动改折叠状态”的需求。
因为v-once会让整个区块跳过后续所有响应式更新，连内部v-model的值变更都会被阻断，所以无法使用。这套方案不需要v-once，所有响应式追踪都只作用于独立的折叠状态控制变量，内部表单的v-model完全在独立的响应式链路里工作，不受任何影响。

具体实现步骤 #

• 保留原有响应式表单数据，所有内部输入控件的v-model绑定逻辑完全不改动，和原有写法一致即可
• 选定组件挂载完成的时机（对应Vue3的onMounted、Vue2的mounted钩子）做一次状态计算：这个时机下组件已经拿到接口返回/初始化的全部表单数据，且尚未接收到任何用户操作，是最适合判断初始折叠状态的节点
• 把计算得到的每个区块的初始折叠值，单独存在独立的折叠状态控制变量里，不要直接在模板里把折叠状态和实时表单数据做响应式绑定
• 为了彻底避免响应式追踪带来的联动，计算初始快照时可以用markRaw（Vue3）或者普通非响应式对象（Vue2）存储判断结果，从依赖收集层面断开后续表单值变化对这个结果的影响

参考代码示例（Vue3） #

<script setup>
import { ref, onMounted, markRaw } from 'vue'
// 原有的响应式表单数据，v-model绑定逻辑完全不变
const formData = ref({
  basicInfo: { name: '', idCard: '' },
  contactInfo: { phone: '', address: '' }
})
// 专门用来控制每个区块折叠/展开的状态变量
const blockFoldState = ref({})

onMounted(() => {
  // 只在组件挂载时计算一次，判断每个区块是否初始需要折叠
  const initialFoldMap = markRaw({
    basicInfo: Object.values(formData.value.basicInfo).every(item => item !== '' && item !== null),
    contactInfo: Object.values(formData.value.contactInfo).every(item => item !== '' && item !== null)
  })
  // 把计算好的初始值赋值给折叠控制变量，后续表单值变化不会影响这个值
  blockFoldState.value = { ...initialFoldMap }
})

// 用户手动点击区块头时正常切换折叠状态
const toggleBlock = (blockKey) => {
  blockFoldState.value[blockKey] = !blockFoldState.value[blockKey]
}
</script>

<template>
  <div v-for="(block, blockKey) in formData" :key="blockKey" class="form-block">
    <div class="block-header" @click="toggleBlock(blockKey)">
      <h3>{{ blockKey }}</h3>
      <span>{{ blockFoldState[blockKey] ? '已折叠' : '已展开' }}</span>
    </div>
    <!-- 内容区直接读折叠状态控制变量，不绑定实时表单判断逻辑 -->
    <div v-show="!blockFoldState[blockKey]" class="block-content">
      <!-- 内部输入框的v-model完全正常工作，和原有逻辑一致 -->
      <input v-model="formData[blockKey].name" placeholder="姓名" />
      <input v-model="formData[blockKey].idCard" placeholder="身份证号" />
    </div>
  </div>
</template>

关键避坑点 #

• 不要直接在模板里写:class="{ 'is-fold': Object.values(formData.basicInfo).every(v => !!v) }"这类绑定：这种写法是响应式的，用户填完最后一个空的时候就会自动触发折叠，完全不符合需求
• 初始状态计算的时机不要过早：如果在setup执行初期就计算，很可能表单还没拿到接口返回的初始值，会导致判断完全不准
• 不要额外加watch去监听表单值变化联动折叠状态：加了watch就会把断开的联动重新接回去，失去“只判断一次”的效果
• 如果是用第三方UI库的折叠组件（如Element Plus的Collapse），只需要把计算好的初始折叠值传给组件的v-model绑定即可，后续组件内部的手动状态维护完全不影响原有逻辑

内容的提问来源于stack exchange，提问作者darkphoenix