vue生命周期是什么

vue的生命周期是什么，如何产生，它有什么作用，如何使用

我们通常认为生命周期是指一个事物从新生到死亡的过程，在vue中也是如此，在我们创建vue对象之时，生命周期便开始了，直到我们不再使用vue对象，生命周期也随之结束。

所有学习vue的人都一定见过来自官网的图示 ↓

只看这张图，我们只能知道存在8个生命周期钩子，但作为初学者一定不懂为什么它们被称为“生命周期钩子”，这就需要我们来深入理解它们是怎么出现的。

从vue源码理解生命周期

在vue源码中目录下找到src/core/index.js的入口文件，可以发现，创建vue对象可以说是一个复杂的过程。我们暂时不需要理解太多，但需要知道，在文件的最后一行导出了一个Vue，而这个Vue也就是我们在创建vue时实例化的对象。

1
2
3

import Vue from './instance/index'
  //more
export default Vue

1
2
3

var vm = new Vue({
  // 选项
})

回到入口文件可以发现，导出的Vue来自于第一行所导入的文件，于是我们来到src/core/instance/index.js文件，再一次发现，原来Vue是通过传入options参数并初始化所得到的对象。

function Vue (options) {
  //more
  this._init(options)
}
//more
export default Vue

再来看src/core/instance/init.js文件，_init方法绑定在Vue的原型上，创建对象则进行初始化。在_init方法中，传入的options参数作为一个对象需要完成很多的操作，而这些操作也就可以说是vue的生命周期。

在一个生命周期中，有很多步骤，第一步要干什么，第二步要干什么……在Vue对象中，如果我们想要在某一个时刻做一些事情，就需要我们知道它执行到了什么阶段，而这个对象也就需要内部产生一个回调来告诉我们它已经到达了某一个阶段，可以进行一些其他的操作。这就是生命周期的意义。

从代码来看（以created为例）：

1
2
3

new Vue({
  created: function () {}
})

created方法作为options参数被传入到_init方法中。

1
2
3

//more
callHook(vm, 'created')
//more

在_init方法中，通过callHook方法接收到created参数，并执行相应操作。

也就是说，callHook作为一个回调告诉我们，Vue对象已经执行到生命周期中created的阶段，通过我们人为地传入参数，可以在这个阶段开始我们需要完成的操作。

再看一下上面提到的callHook，hook即为钩子，所以可以看出来为什么生命周期内的有些函数被命名为“生命周期钩子”，这就表明，created作为传入的函数通过钩子可以进行回调，以实现一些操作。

简单来说，created，mounted这些生命周期钩子可以让我们参与到Vue对象的整个生命周期中并完成一系列操作。

至于如何使用，可以查看官方文档。