生命周期

https://juejin.im/post/5ad10800f265da23826e681e

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 创建=>挂载=>更新=>销毁

beforeCreate:

el    : undefined

data  : undefined

message: undefined复制代码

created:

el    : undefined

data  : [object Object]

message: hi复制代码

beforeMount:

el    : [object HTMLDivElement]

{{ message }}

data  : [object Object]message: hi复制代码

mounted:

el    : [object HTMLDivElement]

<div id="app"><p>hi</p></div>

data  : [object Object]

message: hi

在谈到Vue的生命周期的时候，我们首先需要创建一个实例，也就是在 new Vue ( ) 的对象过程当中，首先执行了init（init是vue组件里面默认去执行的），在init的过程当中首先调用了beforeCreate，然后在injections（注射）和reactivity（反应性）的时候，它会再去调用created。所以在init的时候，事件已经调用了，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做（添加一些行为）。

当created完成之后，它会去判断instance（实例）里面是否含有“el”option（选项），如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function ，这是一个template编译的过程，结果是解析成了render函数：

render (h) {

  return h('div', {}, this.text)

}

复制代码解释一下，render函数里面的传参h就是Vue里面的createElement方法，return返回一个createElement方法，其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容，这里我们指向了data里面的text。

使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的，这也从侧面说明了，在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。

在使用.vue文件开发的过程当中，我们在里面写了template模板，在经过了vue-loader的处理之后，就变成了render function，最终放到了vue-loader解析过的文件里面。这样做有什么好处呢？原因是由于在解析template变成render function的过程，是一个非常耗时的过程，vue-loader帮我们处理了这些内容之后，当我们在页面上执行vue代码的时候，效率会变得更高。

beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。

后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

这就是vue实例从新建到销毁的一个完整流程，以及在这个过程中它会触发哪些生命周期的钩子函数。那说到这儿，可能很多童鞋会问，钩子函数是什么意思？

钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有hook，有则回调。说的更直白一点，每个组件都有属性，方法和事件。所有的生命周期都归于事件，在某个时刻自动执行。

其实，当你跟面试官阐述到这儿的时候，面试官基本上已经满意你的回答了，隐约看到了你的技术功底。当然，如果你还想更进一步，让面试官对你刮目相看，达到加分的效果，你还可以这样说：

在这个过程当中，Vue为我们提供了renderError方法，这个方法只有在开发的时候它才会被调用，在正式打包上线的过程当中，它是不会被调用的。它主要是帮助我们调试render里面的一些错误。

renderError (h, err) {

  return h('div', {}, err.stack)

}

复制代码有且只有当render方法里面报错了，才会执行renderError方法。

所以我们主动让render函数报个错：

render (h) {

  throw new TypeError('render error')

}

复制代码

如图所示，渲染出来的就是Error信息了。还有一点，renderError只有在本组件的render方法报错的情况下它才会被调用。

beforeCreate中拿不到任何数据，它在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created中已经可以拿到data中的数据了，但是dom还没有挂载。会判断有无el，如果没有el则停止后面的模板挂载。

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

使用场景:ajax请求和页面初始化

beforeMount 和 created 拿到的数据相同 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted中el被创建dom已经更新，vue实例对象中有template参数选项，则将其作为模板编译成render函数，编译优先级render函数选项 > template选项

使用场景:常用于获取VNode信息和操作，ajax请求

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

由于beforeUpdate和updated使用的比较少，一般用计算属性和watch代替所以在此不在说明

destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

“你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。”

现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。

啥叫Vue生命周期？

每个 Vue 实例在被创建时都要经过一系列的初始化过程。

例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。

我们称这一系列的过程就是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

啥也不说，先来个干货

这是对于Vue生命周期，官网给的那张图的标注图，图片网上看到的，我觉得标注地很nice，建议一步步仔细看完图片，然后把图片自己悄悄保存下来，对照着图片的内容看第二部分的举例说明。

我相信程序员看代码比看文字更容易理解

对照着上图标注的内容，我们一个钩子一个钩子地举例说明。

作者：Sadhu

链接：https://juejin.im/post/5bd6962e51882558bd3f0696

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。