Vue&React在Props上的处理

声明：

---

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验证

---

参考文档：