黑马vue3大事件项目中展开的运算符的运用场景

前言

今天在跟做黑马”大事件项目“的时候遇到了一个很特别的情况

场景

在写ArticleChannel.vue的时候遇到了一个组件复用的情况，所以将他封装到一个组件当中

如下图，添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

1. open({ }) => 当传过来的参数是空值的时候 =>添加操作，添加表单初始化无数据

1. open({ id: xx, ... }) => 当传过来的值不为空 => 编辑操作，编辑表单初始化需回显

这时候就遇到了我搞不懂的点，为什么FormModel的值要等于{...row} 展开运算符的row，而不是直接赋值一个row？还有就是为什么要用{}包住？

在弹幕里我好像找到了靠谱的说法

这里展开是因为如果直接写row，row改变了，父组件的数据也会改变，相当于指向同一块内存

这里使用扩展运算符，是为了深拷贝对象，直接赋值row会导致表格数据一起变化

实验了一下也确实如此

然后自已在网上也找了扩展运算符的拷贝问题
1.当所拷贝的对象是基本数据类型的时候：深拷贝

    let arr=[1,2,3]
    let arr2=[...arr]
    arr2[0]=1000
    console.log(arr2)//[1000,2,3]
    console.log(arr)//[1,2,3]

 当改变拷贝后的数组的元素时：原来的数组不发生变化，既引用地址不同

2.当所拷贝的对象是引用数据类型的时候：浅拷贝

    let arr=[{a:11},2,3]
    let arr2=[...arr]
    arr2[0].a=1000
    console.log(arr2)        //[1000,2,3]
    console.log(arr)        //[1000,2,3]

任意改变两组数据中的任意值，另一个也会改变，共用一个引用地址

至于我的第二个疑问也找到了答案

为什么要用{}包住，是因为row是一个对象，展开之后是一个数组，所以要用{}

但是还是有点不明白这具体的用法要怎么搞，或者什么场景要用，希望各位大佬能在评论区留下见解。