vue中的属性执行顺序 props -＞ data -＞ com

在 Vue 2 中，这些选项的执行顺序是：

1. props ：父组件传递给子组件的属性会首先被处理。
2. data ：在处理完 props 之后，Vue 会处理数据对象中的所有属性，并将它们添加到 Vue 实例中。
3. computed ：计算属性会在处理完 data 之后被计算，并添加到 Vue 实例中。
4. watch ：侦听器会在 computed 之后被处理，并添加到 Vue 实例中。
5. created ：在处理完所有选项后，Vue 实例会调用 created 钩子，并完成实例化。
6. mounted ：在实例挂载到DOM元素之后，Vue 实例会调用 mounted 钩子。
7. methods ：实例方法会在 mounted 之后被处理，并添加到 Vue 实例中。

综上，选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods。

image.png

这样的话，其实父组件给子组件传递一个比较全面的info对象就可以，子组件就可以在computed或者后续步骤中使用这些数据，进而制造出自己想要的数据：省去了组附件组装，然后再传递给子组件的步骤

image.png