vue中修正Modal的重置功用怎样写?(重置不零丁调背景接口)可利用深拷贝

工作中碰到弹出模态框情势的修正功用,模态框内里是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

这时刻举行拷贝,然后在将字符串转换成对象,就完成了深拷贝

加油!天天提高一点点!

    原文作者:哈哈哈
    原文地址: https://segmentfault.com/a/1190000018875144
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞