vue的编辑功能

 <el-button
                                size="mini"
                                @click="showEditView(scope.$index, scope.row)">编辑
                        </el-button><!--scope.$index是当前操作到第几行。scope.row是当前行json对象-->

<el-dialog
                title="修改职位"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <div style="margin-bottom: 3px;">
                    <el-tag>职位名称</el-tag>
                    <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
                </div>
                <div>
                    <el-tag style="margin-right: 10px;">是否启用</el-tag>
                    <el-switch
                            v-model="updatePos.enabled"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>

在script进行处理的时候,开始是这样的
data里面有定义数据

updatePos: {
                    name: '',
                    enabled: false
                },

methods里面的方法先是这样写的

 showEditView(index, data) {
                this.updatePos - data;
                this.dialogVisible = true;
            },
            doUpdate() {
                this.putRequest("/system/basic/pos/", this.updatePos).then(resp => {
                    if (resp) {
                        this.initPositions();
                        this.updatePos.name = '';
                        this.dialogVisible = false;
                    }
                })
            },

但是发现在更改弹出的编辑框进行编辑的时候，当前行的数据也改变了
且点击取消按钮数据仍然是编辑的数据.

于是使用Object.assign()就可以解决这个问题

showEditView(index, data) {
                Object.assign(this.updatePos, data);
                this.dialogVisible = true;
            },

那么问题来了，记得之前我在学习js的时候
Object.assign()是浅拷贝啊，为什么我在修改数据的时候当前行数据就不变了呢？

Object.assign()是深拷贝还是浅拷贝？

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。

如何实现深拷贝？

1.用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象

但是需要注意的是
可以转成 JSON 格式的对象才能使用这种方法，如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

2.Object.assign()拷贝

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

3使用递归的方式实现深拷贝

此外，通过jQuery的extend方法实现深拷贝，lodash.cloneDeep()实现深拷贝。