Vue&React在Props上的处理
2020-05-12 本文已影响0人
睦月MTK
声明：
1.在Props的传入方式上
Vue：
- Vue的Props分为两种
- 第一种是在组件内部用
props定义过的属性，这些属性被传入时，组件内部可以使用this.attrName来访问对应的属性值
this.props = ['title']- 第二种是在未在组件内部定义过的属性，这些属性会被放入到
this.$attrs中
- 第一种是在组件内部用
React：
- React的所有Props都会被传入组件内的
this.props中，使用时，用this.props.attrName就可以直接访问
2.在传入的Props更新时
当传入的Props更新时，Vue和React都会触发组件的更新，不同的是，React提供一个shouldComponentUpdate方法让你自行判断是否需要更新。
3.在组件内部更新Props时
Vue：
- Vue允许在组件内部更新Props，但是并不建议这么做，因为父组件更新时，子组件内的所有Props将回归初始值
React：
- React绝不允许在内部更改Props，并且强调要达到同样目的，请使用
this.state
4.组件上定义的Props是否会显式显示在组件的根元素上
Vue：
- 如果是组件内部定义过的属性，那么根元素上会显示一对特殊的键值，如
data-v-407e15fa=""，如果不是内部定义过的属性，那么该属性会自然的显示在组件的根元素上 - 由于有上述的特点，故Vue存在属性继承的说法，对于非
class和style的属性来说，组件上定义的属性会覆盖组件根元素上定义的属性，而那特殊的两个将会执行合并操作。 - Vue给组件提供了
inheritAttrs选项，当该值为false时，将会禁用属性的继承，效果和React差不多，区别是对于class和style是无效的，这两个还是会继承合并
React：
- 在组件上定义任何属性都不会显示在组件的根元素上
5.在Props传入的类型上
都支持多种类型值的传入，Vue支持以v-bind结合的属性传入方式和以JSX方式的属性传入方式，React支持JSX方式的属性传入方式
Vue：
- 以
v-bind结合的传入方式（以传入一个Date对象为例）
<mtk-clock title="mtk" :date="date"></mtk-clock>
注意只可以用在模板语法上，用在JSX上会报错。再，如果想一次性传入一个对象的所有属性作为Props，可以使用
v-bind="object"
- 以JSX方式
<mtk-clock title="mtk" date={date}></mtk-clock>
React：
- 以JSX方式（略）
6.额外
如果Vue使用模板语法来传入Props的话，那Props还支持类型校验，具体请看Prop验证
参考文档：
