vue props 传入对象或数组的正确方式应该是怎么样的？

Question

问题

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

上面是文档中的描述，但是如果在props中传递的是对象或是数组，根据JavaScript的特性，传递过来的是引用类型，所以我在子组件中也是能够修改父组件的数据的。
为了避免干扰父组件数据，难道每次都将props数据转换成深拷贝的局部变量或计算属性吗？
如何优雅的方式解决这种双向数据？
为什么props传递过来的数据不使用深拷贝？

Answer 1

深拷贝效率太低，需要分配更多的内存地址。

优雅的方式 是如下：

数组：
<custom-element :whatever="[...array]"></custom-element>

对象:
<custom-element :whatever="{...obj}"></custom-element>

或者 ：

<custom-element v-bind="obj" </custom-element>

或者官给出的增加一个计算属性建议：

但解决思路都是一样的，防止子组件和父组件属性指针 指向同一个内存地址。

Answer 2

我也想知道答案