面试题：结合父子组件传值分析beforeCreate与created钩子

优点：
- beforeCreate钩子：在实例初始化之后，数据观测和事件配置之前被调用。此时虽然不能访问data、computed等，但可以对props进行一些简单的逻辑判断，比如对传入的props数据类型进行预检查，如果类型不符合预期可以进行一些提示或处理，在数据真正开始处理之前做一些早期准备工作。
- created钩子：在实例创建完成后被立即调用，此时已经可以访问data、computed等，也可以对props进行操作。可以基于props数据进行更复杂的数据初始化，比如根据props数据计算出其他需要在组件内使用的数据，为后续组件的渲染和功能实现做好准备。
缺点：
- 数据响应式问题：在beforeCreate钩子中操作props数据，由于此时数据观测还未开始，对props数据的操作可能不会被Vue的响应式系统捕获，后续props数据变化时，之前在beforeCreate钩子中的操作可能不会重新生效，导致数据不一致。
- 破坏单向数据流原则：Vue提倡单向数据流，父组件通过props向子组件传递数据，子组件应该尽量避免直接修改props数据。在这两个钩子函数中操作props数据，如果处理不当，可能会改变props的原始值，使得数据流向混乱，不利于组件的维护和调试，也可能导致父组件数据和子组件使用的数据不一致。

beforeCreate() {
  if (typeof this.$props.someProp!== 'number') {
    console.warn('someProp should be a number');
  }
}

created钩子：
- 基于props数据进行内部数据的初始化。例如，假设父组件传递了一个数组props，子组件需要根据这个数组计算出一个新的数组供自身使用：

data() {
  return {
    newArray: []
  };
},
created() {
  this.newArray = this.$props.originalArray.map(item => item * 2);
}

这样在created钩子中基于props数据初始化内部数据，既遵循了单向数据流原则，又能有效利用props数据为组件功能服务，同时保证了数据的响应式。

星途面试题库