vue3判断elementui中el-form是否更新变化，变化就提示是否保存，没变就直接离开

滿2024-09-09 10:07

需求是：如果用户在表单中输入了内容，但是没有点击保存，而突然想离开这个页面了，就要提示询问是否保存，这个时候就要判断表单内容是否发生变化，并做相应的逻辑控制

1.方法说明：

watch和watchEffect是Vue 3.0中新增的两个响应式API，用于监听数据的变化。watch适用于需要获取新值和旧值，或者需要懒执行的场景，而watchEffect适用于需要监听多个数据源，并且需要立即执行的场景。它们之间的区别如下：

watch是监听单个数据源，可以设置immediate和deep选项，可以获取新值和旧值；watchEffect则是监听一组数据源，不能设置immediate和deep选项，不能获取新值和旧值。

watch是懒执行的，只有在数据变化时才会执行回调函数，而watchEffect则是立即执行的，不管数据是否变化。

javascript 复制代码

<template>
  <el-form :model="formData">
    <el-form-item label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>
 
<script setup>
import { reactive, watch, watchEffect } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const formData = reactive({
  username: '',
  // 其他表单数据
});
 
// 使用watchEffect来监听整个formData对象的变化
watchEffect(() => {
  const isDirty = Object.keys(formData).some(key => formData[key] !== initialFormData[key]);
  if (isDirty) {
    // 表单数据有变化
    ElMessageBox.confirm('您有未保存的更改，是否保存？', '提示', {
      confirmButtonText: '保存',
      cancelButtonText: '放弃',
      type: 'warning'
    }).then(() => {
      // 保存逻辑
    }).catch(() => {
      // 取消逻辑
    });
  }
}, {
  flush: 'post' // 确保在DOM更新后执行
});
 
// 初始表单数据，用于比较
const initialFormData = { ...formData };
</script>

watchEffect会在响应式依赖变化时执行，并通过比较formData和initialFormData来判断表单数据是否有变化。如果有变化，会弹出消息框询问用户是否保存更改。如果没有变化，用户离开时不会有任何提示