Vue组件生命周期执行顺序

通过学习他人的博客学习到的知识点，小白我，顺便总结下，

引出问题

需求：父组件刚更新完，子组件要立马获取到父组件中传过来的值

created：在实例创建完成后被立即调用，这个时候this可以使用

mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，可以使用DOM元素，注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

在单一组件中，钩子的执行顺序是created -> mounted -> destroyed

探究

子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的

解决方法：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。

结论：Vue父子组件生命周期钩子的执行顺序遵循：从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。

注意：把API请求方在created中只是在回显的情况因为要父组件更新完，子组件要立马获取到父组件中传过来的值，其实一般还是把API请求和操作DOM，setTimeout在mounted中的

 

学习网站：https://segmentfault.com/a/1190000015890245