vue中修改Modal的重置功能怎么写？（重置不多带带调后台接口）可利用深拷贝

Blackjun 发布于2019-08-23 16:56 / 1568人阅读

摘要：工作中遇到弹出模态框形式的修改功能，模态框里面是表单表单中的内容是从后台获取的，这时候用户修改完没有提交，而是想重置然后重新修改，怎么办呢重新调一遍后台的接口，将原始数据再一次放入中，这个方法可能会浪费资源，占用带宽可以利用缓存可以利用深拷

工作中遇到弹出模态框形式的修改功能，模态框里面是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

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

加油！每天进步一点点！

云服务器 GPU云服务器 js中重置表格怎么重置wordpress asp整站后台可修改怎么重置阿里云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103543.html

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

摘要：工作中遇到弹出模态框形式的修改功能，模态框里面是表单表单中的内容是从后台获取的，这时候用户修改完没有提交，而是想重置然后重新修改，怎么办呢重新调一遍后台的接口，将原始数据再一次放入中，这个方法可能会浪费资源，占用带宽可以利用缓存可以利用深拷工作中遇到弹出模态框形式的修改功能，模态框里面是Form表单,Form表单中的内容是从后台获取的，这时候用户修改完没有提交，而是想重置然后重新修改...

rockswang 2019-08-29 18:37 评论0 收藏0
jsliang 的 2019 面试准备

Create by jsliang on 2019-2-11 15:30:34 Recently revised in 2019-3-17 21:30:36 Hello 小伙伴们，如果觉得本文还不错，记得给个 star ，小伙伴们的 star 是我持续更新的动力！GitHub 地址并不是只有特定的季节才能跑路，只因为人跑得多了，这条路就定下来了。金三银四跳槽季，jsliang 于 2019...

PascalXie 2019-05-23 17:31 评论0 收藏0
数组（引用类型）复制问题

摘要：数组赋值问题涉及到拷贝堆栈空间基本数据类型和引用数据类型的差异。把数组值重置成输出结果是把数组值重置成输出结果是亲测用等方法进行数组复制都是浅拷贝。数组赋值问题涉及到拷贝、堆栈空间、基本数据类型和引用数据类型的差异。（自行了解） var arrA = [1,2,3,4,5]; var arrB = arrA; // 把B数组值重置成0; arrB.fill(0); console.l...

余学文 2019-08-23 14:25 评论0 收藏0