vue 直接赋值、浅拷贝、深拷贝区别

做后台管理的时候，经常会用到表格数据的修改操作，点击修改的时候，将需要修改的数据，展示，此时，就用到了拷贝（赋值）

（1）直接赋值 this.tmForm = row

如果直接将服务器数据给对话框，会导致修改表单数据后，关闭对话框或者点击取消，列表显示的都是修改后的值，因为model进行双向数绑定

（2）浅拷贝

this.tmForm = {...row};

可以解决上述（1）的问题，但是仅限于数据格式简单的 例如：数据格式

tmForm: {
    tmName: "",
    logoUrl: "",
}

但是，如果数据结构当中存在对象里面套数组，数组里面套对象的时候， 例如，数据格式是：

{
    "attrName": "string",
    "attrValueList": [
      {
        "attrId": 0,
        "valueName": "string"
      }
    ],
}

就需要使用深拷贝了

（3）深拷贝

A.按需引入loadsh当中的深拷贝

import cloneDeep from 'lodash/cloneDeep';

B.使用

this.attrInfo = cloneDeep(row);