VUE使用中生命周期遇到的问题总结

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

一、父子组件的渲染顺序相关：

子组件先mounted，父组件先created

加载渲染过程：

父beforeCreate -> 父created -> 父beforeMount -> 
子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

• 子组件更新过程：
  • 父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程：
  • 父beforeUpdate->父updated
• 销毁过程：
  • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

二、props是在哪个生命周期进行传递的？

1. 首先子组件定义created阶段，父组件已经调用过了created阶段，这时，proper属性，data属性，method属性已初始化完成。props传递数组、对象这种引用类型的数据时，改变其值将会影响父组件中的数据状态；

2. 父子组件的初始化周期，从创建到挂载，是从外到内，再从内到外，且mixins的钩子函数总是在当前组件之前执行。所以，父组件异步传值，子组件mounted阶段，也不一定能取得值。因此，建议确定父组件异步获取值之后，再渲染子组件

eg：通过v-if，拿到数据后再渲染。

    <my-editor v-if="larger.length" :lesser="lesser" :larger="larger"></my-editor>

三、一般情况下父组件都是在mounted时机进行异步请求,然后才能获取到数据，显然，当父组件mounted执行时， 子组件的生命周期都已经执行完了；如果子组件需要对数据进行加工、筛选的方法在什么时机去执行呢 ？

解决方案：

方案一：

• 根据什么周期执行顺序， 如果我们可以在父组件的created阶段获取到数据【已经获取到】，这样在子组件的生命周期中调用方法，可以正确拿到props数据。

方案二：

• 给子组件添加 v-if=”false”，等父组件在获取到数据后，设置 v-if 为 true，这时候子组件才开始进行渲染加载， 生命周期执行是可以获取props数据，但是这样做的缺点是，异步数据获到之前，页面是空白的，因为子组件添加了 v-if=”false”, 不会渲染。

方案三：

• 子组件中使用watch来监听props的变化然后调用方法，当异步获取到数据后，watch会监听到props更新；目前该方法是比满足需求的。

    以上就是本小白使用中遇到的问题，希望大家多多指教~~