Vue生命周期的理解

Vue生命周期的理解

• 什么是生命周期：Vue项目从开始创建到停止运作的过程就是生命周期。

• 什么是钩子函数：Vue项目从创建到停止运作的过程也会运行一些叫做生命周期钩子的函数

  首先new Vue()新建实例，然后初始化事件和生命周期，
  然后执行beforeCreate，在执行这个钩子时，data和methods中的数据都还没有被初始化，
  然后执行created，在执行这个钩子时，data和methods中的数据已经被初始化好了，如何要操作data或者调用methods方法，最早要在created中操作。
  然后判断实例里是否有el选项，如果有el选项，则继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上手动挂载，即调用vm.$mount(“#app”)，才会继续向下执行。
  然后判断有没有template选项，如果有，则将template解析成抽象语法树，然后再通过render函数编译，如果没有template选项，则将el的外部html作为template编译
  然后执行beforeMount，此时模板已经在内存中渲染好了，但还没把模板挂在到页面中去
  执行完beforeMount后，内存中的渲染好的模板会真实的替换到页面中去。
  然后执行mounted，此时代表实例已经完全被创建好了。如果需要操作dom,至少要在mounted中执行。
  当实例的data发生改变时，会立即执行beforeUpdate，此时，data的数据是新的，但页面中的数据还是旧的，
  执行完beforeUpdate后，虚拟dom重新渲染更新
  当执行到updated时，页面和data数据都是最新的
  beforeDestroy
  destroyed

生命周期执行顺序

• beforeEach: 路由全局前置守卫，可用于登录验证、加载进度条等。
• beforeEnter: 路由独享守卫，和全局前置守卫差不多
• beforeRouteEnter: 进入组件前的钩子，可导航完成前获取数据
• beforeCreate:组件生命周期，不能访问this。
• created:组件生命周期，可以访问this，不能访问dom。
• beforeMount:组件生命周期
• mounted:访问/操作dom。
  beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。一般用在还没保存就突然离开，如发布文章写到一半突然离开，没有保存草稿时，可用next(false)取消离开
• 父子组件加载渲染过程
  父组件beforeCreated ->父组件created ->父组件beforeMounted ->子组件beforeCreated ->子组件created ->子组件beforeMounted ->子组件mounted -> 父组件mounted。
  -子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated。
• 父组件更新过程
  父beforeUpdate->父updated。
• 多个子组件的created执行顺序为父组件内子组件DOM顺序
  多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关
  父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子