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来判断表单数据是否有变化。如果有变化,会弹出消息框询问用户是否保存更改。如果没有变化,用户离开时不会有任何提示

相关推荐
你的人类朋友1 小时前
什么是API签名?
前端·后端·安全
会豪3 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子3 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶3 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子3 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark4 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js