登录
首页 >  数据库 >  MySQL

vue中修改Modal的重置功能怎么写?(重置不单独调后台接口)可利用深拷贝

来源:SegmentFault

时间:2023-02-16 15:25:05 381浏览 收藏

小伙伴们对数据库编程感兴趣吗?是否正在学习相关知识点?如果是,那么本文《vue中修改Modal的重置功能怎么写?(重置不单独调后台接口)可利用深拷贝》,就很适合你,本篇文章讲解的知识点主要包括MySQL、javascript、vue.js、html5、css。在之后的文章中也会多多分享相关知识点,希望对大家的知识积累有所帮助!

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?
①重新调一遍后台的接口,将原始数据再一次放入Form中,这个方法可能会浪费资源,占用带宽
②可以利用缓存
③可以利用深拷贝
简单解释一下深拷贝和浅拷贝
a复制b,修改b,a也发生改变,说明拷贝不彻底,此为浅拷贝,a复制b,修改b,a不变,此为深拷贝
深拷贝一般复杂数据类型才会发生,原因是基本数据类型和复杂数据类型的存储方式不同。
关于深拷贝和浅拷贝的文章有很多,想多了解的同学可以自行搜索
下面直接说方法
我们可以封装一个深拷贝函数,在随便一个js文件里面(根据自己的项目)

    /**
     * 深度拷贝
     * @param {*} arr 
     */
    export const copyArray = (arr) => {
      return JSON.parse(JSON.stringify(arr))
    }
   

然后在你用到修改功能的vue文件中,直接引入使用就可以le

    import { copyArray } from '@/utils/util.js'
    //重置的时候
    //this.formInline是这个Form绑定的:model
    //data是初始时Form的数据(修改前)
    this.formInline = copyArray(data)

这是深拷贝的json方式,深拷贝的方式有很多,可自行了解
说一下这种方式的原理吧
上面说过基本数据类型没有深拷贝,json.stringify()将数组数据类型转换成字符串数据类型
字符串属于基本数据类型,基本数据类型是按值传递的

    var b = 1;
    var a = b;
    b++;
    console.log(a,b)//1,2

这时候进行拷贝,然后在将字符串转换成对象,就实现了深拷贝

加油!每天进步一点点!

今天关于《vue中修改Modal的重置功能怎么写?(重置不单独调后台接口)可利用深拷贝》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!

声明:本文转载于:SegmentFault 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>
评论列表