在 Vue 里， props 传入 Object 或 Array 的最佳实践是什么？

如果一个 Vue 组件接受一个 Object 或者 Array 作为 prop ，那在这个组件内部处理该 prop 时就会有很多种写法，我很好奇，到底哪种是最佳实践呢？

从组件使用该 prop 的方式来看，可以分成两种类型：

• 外部状态型。 就是直接拿 prop 值来渲染，修改时也直接修改原 prop 内部的内容。比如，我写了个表格组件，在里面直接用 v-for 遍历 prop 里的数组来显示表格的每一行。
• 内部状态型。 就是内部还有一个 ref/data 值，其初始值为传入的 prop 。如果要修改数据，则仅修改内部的 ref/data ，然后通过一些方式与外部的 prop 同步。比如，我写了个表格组件，我在 created 时把 prop 复制一遍，模板里 v-for 遍历的是我复制过的这个数组。然后我 watch 外部 prop ，如果它变化了，我就再复制一遍。

从组件向外发布新数据的方式看，又能分成三种类型：

• 直接修改型。 就是组件把 prop object / array 里面的元素或者属性直接绑定到 v-model 上，或者直接用 JS 改外部传进来的 prop 值。我在 vue-element-admin 里见过这种操作，里面有个组件可以开关表格的各个列，然后用这个组件时只需要把记录各个列开关状态的数组用 prop 传进去，不需要监听 update 事件。
• 修改后通知型。 指的是组件会直接修改 prop object / array 里面的元素，但是修改完之后会触发 emit 事件，把 prop 值原封不动地 emit 出去。
• 不可变对象型。 指组件永远不直接修改外部 prop ，而是每次修改前都把整个对象（或数组）克隆一遍，修改新的对象，再通过 emit update 事件把新的对象传出去。

这几种写法各有优缺点，你的项目用的是什么写法？最推荐的写法到底是啥？