在 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 事件把新的对象传出去。

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

z4oSkDNGGC2svsix

2023-07-01 21:43:24 +08:00

可以简化为, 组件是否修改 prop 中的对象, 如果修改, 如何通知父组件.

1. 如果组件不修改 prop 对象, 当然可以直接使用, 如果你是函数式原教旨主义者, 你还可以克隆一遍
2. 当 prop 近乎于组件独有的状态时, 可以直接修改, 例如表格列开关状态, 这个状态除了这个表格, 其他地方不会用到.
3. 如果外部需要知道有状态产生变化, 但并不依赖该状态的值, 可以修改后通知. 比如有一个更新视口的函数, 在表格列开关后, 它会更新页面宽度. 这个函数并不在乎具体哪个列产生了变化.
4. 当状态被多个地方依赖时, 用不可变对象会更加稳健. 所有的组件只修改克隆版, 修改后 emit 新的值.
5. 可以无脑用不可变对象. 啰嗦且性能也不好.

ChefIsAwesome

2023-07-01 22:17:11 +08:00

比方讲你把一个组件里的一部分拆出来变成一个子组件。你不是为了复用功能，而是为了分解逻辑才拆分。拆分之前，对子组件这部分代码来说，它修改 data(state)。所以没有理由一模一样的代码，放到新文件里就要做事件、克隆之类的操作，直接修改 prop 就对了。
另外 vue 的事件是一对一的。父组件订阅子组件事件，等同于父组件传一个函数给子组件执行。