vue3复杂表单列表，根据表单内容是否改变判断是否弹出离开前保存提示（用户修改后又改回原来的数据不触发保存提示）

背景及问题

适用于整个表单列表直接整个提交的情况

1. 切换路由前提示表单未保存，怎样在表单内容修改后触发（用户修改后又改回原来的数据不触发保存提示）？
2. 复杂表单如何监听值变化情况？

解决办法

整体思路：
在页面挂载时设置flag=false ——》调取表单列表后设置为true——》监听表单列表内容判断flag值——》切换路由判断flag值是否为false，弹出提示

//设置初始值
const flag=ref(false)
//接收接口返回列表后，设置flag为true
function(){
    
    
flag.value=true
}
//路由守卫判断提示弹出
onBeforeRouteLeave((to,from,next)=>{
    
    
if(!flag.value){
    
    
ElMessageBox.confirm('数据未保存，是否确认退出','提示',{
    
    
distinguishCancelAndClose:true,
showCancelButton:true,
confirmButtonText:'确认'
}).then(()=>{
    
    
next()
}).catch(()=>{
    
    
next(false)
})
}else{
    
    
next()
}
})

那么如何对复杂数组对象如何监听值？
首先由于复杂数组对象list嵌套有多层，监听时即使我们加上了deep:true属性，我们会发现newVal和oldVal始终相等，所以我们就需要用到计算属性computed并对计算后的值进行监听
假设我们从接口获取到的数据为list,同时设置变量
listParse.value=JSON.parse(JSON.stringfy(res.data||[]))

const listData=computed(()=>{
    
    
JSON.parse(JSON.stringfy(list||[]))
})
watch(listData,
val=>{
    
    
if(val?.length!==listParse.value?.length){
    
    
flag.value=false
}
flag.value=_.isEqual(listParse.value,val)
},
{
    
    deep:true})

注：isEqual为lodash的api