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

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

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会在响应式依赖变化时执行,并通过比较formDatainitialFormData来判断表单数据是否有变化。如果有变化,会弹出消息框询问用户是否保存更改。如果没有变化,用户离开时不会有任何提示

相关推荐
IT_陈寒7 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用9 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥24 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js