Vue3中watch监听表单如何规避初始化触发，仅手动修改才更新isFormEdited

核心思路是新增初始化状态锁，在数据预填充阶段屏蔽watch的执行逻辑，初始化完成后再开启监听：

第一步：新增状态标记 #

在data中添加初始化完成标记：

data() {
  return {
    // 其他原有变量
    isFormEdited: false,
    isDataInitialized: false // 新增初始化锁
  }
}

第二步：修改created逻辑 #

在所有表单初始赋值操作全部完成后，把初始化锁设为true：

created() {
  const getForm = axios.get(`api/dashboard/form/${this.$route.params.id}/edit`);
  const getFormTypes = axios.get('api/dashboard/form/types');
  axios.all([getForm, getFormTypes])
    .then(
      axios.spread((...responses) => {
        this.form = responses[0].data;
        if(!this.form.type_id) this.form.type_id = "";
        this.form.fields.map((field) => {
          if(field.options){ field.options = JSON.parse(field.options); }
          if(field.mime_types_allowed){  field.mime_types_allowed = JSON.parse(field.mime_types_allowed); }
          return field;
        });
        this.types = responses[1].data.data;
        // 所有初始赋值完成，开启监听锁
        this.isDataInitialized = true
      })
    )
    .catch(errors => {
      alert("Error");
      console.log(errors);
  });
}

第三步：调整watch逻辑 #

仅当初始化锁开启时，才修改isFormEdited状态：

watch: {
  'form': {
    handler: function(v) {
      // 只有初始化完成后的变更才判定为用户编辑
      if(this.isDataInitialized) {
        console.log('form changed')
        this.isFormEdited = true
      }
    },
    deep: true
  }
}

方案说明 #

• 预填充数据阶段触发的watch回调会被isDataInitialized拦截，不会触发编辑状态变更
• 所有初始赋值操作必须全部执行完成后再修改锁状态，避免遗漏初始化操作触发的回调
• 如果后续有其他需要重置表单的场景，重置时先把isDataInitialized设为false，重置完成后再改回true即可复用逻辑

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