Vue的11个生命周期

生命周期图示.png

• 什么是生命周期钩子？

  所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。

  他们在对应的阶段做对应的事。共分为8个阶段，接下来一一介绍：

• beforeCreate

  1. 当前生命周期是Vue初始化的时候执行的钩子函数，此时，data和methods还未将自身属性和方法代理到Vue的实例上。因此，在当前生命周期不能访问data中的属性和methods中的方法。

  2. 当前生命周期在执行时组件还未创建，因此，可以在当前组件中进行loading动画的显示。

• created创建后*

  1. 当前生命周期函数是组件在创建后执行的，因此，可以在当前生命周期中进行前后端数据的交互。
  2. 当前生命周期在执行的时候，会将data的属性进行数据劫持，给每一个属性添加getter和setter方法。
  3. 当前生命周期在执行时，会将data的属性和methods的方法代理到Vue的实例中。

• beforeMount挂载前

  当前生命周期是组件挂载在页面之前会执行的钩子函数，数据也初始化完成，但是数据的双向绑定还是显示{{}}，可以在当前生命周期中对数据进行最后的修改。（这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。）

  当前生命周期中的数据和模板还未进行结合，因此，访问不到真实的DOM结构。

• mounted挂载后*****

  当前生命周期在组件被挂载到页面的时候执行的函数，数据和模板已经结合，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。可以通过this.$refs访问真实的DOM结构。

  场景：在当前的生命周期函数中进行的实例化（Swiper BScroll echarts）

  ref语法：

  1. 给需要获取真实DOM结构的元素添加ref属性。（名字必须唯一）eg:<p ref="name"></p>
  2. 通过this.$refs.名字进行访问真实的DOM结构

• beforeUpdate更新前*

  当前生命周期函数中，只要是页面数据改变了都会触发，但更新的数据还未和模板结合，可以访问到真实的DOM结构，并且能够对更新的数据的检测和做最后的更改 。

• updated更新后*

  当前生命周期函数中数据和模板已经进行相结合，可以在这里获取最新的DOM结构。

  如果在当前生命周期函数中进行实例化操作时，要进行边界条件的判断，否则会造成性能消耗。

  new操作执行的时候做了哪些事情？

  1. 开辟一块内存空间，创建一个空对象
  2. 将所创建的对象的__ proto __指向构造函数的prototype
  3. 执行构造函数中的代码，将this的指向，指向当前的内存空间
  4. 返回该对象（除非构造函数中返回了一个对象或者函数）

• beforeDestory销毁前*

  当前生命周期会在组件被销毁的时候去执行，可以访问到真实的DOM结构，进行事件的解绑，定时器的清除。

• destroyed()销毁后

  在当前生命周期断开了与vue的关联，访问不到真实的DOM结构。

  （对象停止并从内存中删除）

• keep-alive

  keep-alive是Vue的内置组件，其中的生命周期只会走一遍，并且会增加activated和deactivaed生命周期，用以其他的业务逻辑。

  通常用来包裹动态切换的路由或组件，防止组件频繁地创建和销毁，从而达到性能优化的效果。

  • keep-alive常用的属性

  include：字符串或正则表达式。匹配的组件会被缓存。

  exclude：字符串或正则表达式。匹配的组件都不会被缓存。

  max：数字。最多可以缓存多少组件实例。

• activated活跃状态

  当前组件显示时执行的生命周期

• deactivated缓存状态

  当前组件缓存时执行的生命周期

• errorCaptured

  当捕获一个来自子孙组件的错误时被调用。

  此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。