如果一个 Vue 组件接受一个 Object 或者 Array 作为 prop ,那在这个组件内部处理该 prop 时就会有很多种写法,我很好奇,到底哪种是最佳实践呢?
从组件使用该 prop 的方式来看,可以分成两种类型:
从组件向外发布新数据的方式看,又能分成三种类型:
这几种写法各有优缺点,你的项目用的是什么写法?最推荐的写法到底是啥?
1
ruoxie 2023-07-01 21:19:54 +08:00 1
vue react 都写的用的是不可变对象型
|
2
z4oSkDNGGC2svsix 2023-07-01 21:43:24 +08:00 1
可以简化为, 组件是否修改 prop 中的对象, 如果修改, 如何通知父组件.
1. 如果组件不修改 prop 对象, 当然可以直接使用, 如果你是函数式原教旨主义者, 你还可以克隆一遍 2. 当 prop 近乎于组件独有的状态时, 可以直接修改, 例如表格列开关状态, 这个状态除了这个表格, 其他地方不会用到. 3. 如果外部需要知道有状态产生变化, 但并不依赖该状态的值, 可以修改后通知. 比如有一个更新视口的函数, 在表格列开关后, 它会更新页面宽度. 这个函数并不在乎具体哪个列产生了变化. 4. 当状态被多个地方依赖时, 用不可变对象会更加稳健. 所有的组件只修改克隆版, 修改后 emit 新的值. 5. 可以无脑用不可变对象. 啰嗦且性能也不好. |
3
ChefIsAwesome 2023-07-01 22:17:11 +08:00 1
比方讲你把一个组件里的一部分拆出来变成一个子组件。你不是为了复用功能,而是为了分解逻辑才拆分。拆分之前,对子组件这部分代码来说,它修改 data(state)。所以没有理由一模一样的代码,放到新文件里就要做事件、克隆之类的操作,直接修改 prop 就对了。
另外 vue 的事件是一对一的。父组件订阅子组件事件,等同于父组件传一个函数给子组件执行。 |
4
vivipure 2023-07-01 22:19:39 +08:00 1
虽然官方推荐不要直接修改 props , 但实际应用中,如果传入的是引用的话,子组件修改也无所谓的。反正 Vue 是有依赖收集的,并不强调不可变性。
在常见的表单场景下,我就习惯将部分独立的属性,用子组件拆分进行控制。修改后再通知实在繁琐,且没多大必要。 |
5
mineralsalt 2023-07-01 22:43:25 +08:00
我也很好奇这两种写法哪个对? 我一般都用第 2 个, 因为可以传入基本类型和自定义对象
1: defineProps({val: Number}) 2:: defineProps<{val: number}>() |
6
tianzi123 2023-07-03 17:18:43 +08:00
你写的貌似有问题吧 , 内部状态型 里说 用 watch 监听/? 如果用了 ref 为啥不用 const data = toRef(data) 直接 就是响应式的,另外单项数据流我觉得还是要遵守,这是一个良好的书写习惯,特别是团队合作,虽然有时候可以偷懒,但不利于长期维护
|