今天小编给大家详细讲解一下 vue 的生命周期。希望大家多多指教，哪里有遗漏的地方，也请大家指点出来 谢谢。
一、 怎么理解 Vue 的生命周期的？
生命周期：从无到有，到到无的一个过程。Vue的生命周期对组件来说的 或 实例来说。
简单理解：比如我们都知道 js 中的定时器，定时器都有开始的那一秒，已经执行过程中，最后执行完毕，我们的 Vue 的生命周期就好像 定时器一样，有许多过程，他们就像钩子一样，相互牵连着。
1. 在Vue当中 组件(自定义的一些标签) 浏览器是无法解析的。
2. 那组件的自定义标签怎么使用的呢？
主要分一下几个过程：
从创建它 》到使用它》到使用完毕》在销毁它
3. vue实例对象是最大的组件(也可以称它为根组件)
什么是钩子函数？
因为 Vue 的生命周期都是分 一个阶段一个阶段的 并且都是相连的。
二、Vue的生命周期 主要分 四个阶段 和 八个过程
我们先说 哪四个阶段：
Create 创建
Mount 挂载(加载)
Update 更新
Destroy 销毁
又是哪八个过程呢：
Create之前和Create之后
Mount之前和Mount之后
Update之前和Update之后
Destroy之前和Destroy之后
debugger 断点调试 在工作当中会经常用得到的
Vue的生命周期都写在 Vue实例下
1. 第一个过程 beforeCreate
beforeCreate 实例初始化之前。数据没有加载(data)，页面更没显示。
第一步初始化之前数据(data)还没有拿到呢,data还没有存在就会执行它。
// 这是个函数,初始化之前
beforeCreate(){
console.log(this.a) // 会打印 undefined 为什么是undefined？说明我在执行这个函数,没数据
debugger
}
数据还没有加载过来，往往在这个阶段做 loading 请求数据 请求状态，因为什么都没有
2. 第二个过程 created
1. Created 实例初始化之后。它仅仅只请求到了数据，事件，属性等。但是没有加载，页面依然没有显示。
在这个阶段 往往发送数据(ajax)请求，http请求
created(){
console.log(this.a)//能请求到数据,但页面不显示
debugger
}
2. 在created之后这个 $el 属性还是不可见的，它会在created和beforeMount判断一下有没有$el这个选项。
3. Create到beforeMount 有个判断：
1. Create到beforeMount主要是找模板，模板都是虚拟的
2. Create -之间的过程> beforeMount之间 vue会在options 中查找有没有 el 选项，有就把他作为模板，没有通过 vm.$mount() 这个方法去挂载。
说白了你指定模板可以通过 el:”#app”指定，也可以通过vm.$mount()去指定
}).$mount("#app") el:"#app",
3. 有el就继续判断，你有没有template属性，如果还要模板选项(属性)，那就直接把模板渲染出去,没有就把el的东西渲染出去扔掉#app body里面。
4. 如果有模板就渲染模板的东西可以看的完全没有el了
5. Created之后数据请求过来了，就是找对应的模板
3. 第三个过程 beforeMount
beforeMount vue会将 el对应的模板加到 vm.$el 中去，但是还没有挂载出去，页面还没有显示。
现在有个问题？视图没渲染为啥页面会有{{a}},button？
首先视图没有出来不是说页面没有出来，浏览器在加载页面是从上到下，从上到下加载过程中，是先执行body，还是script？先执行body，body该解析的解析，像html标签能识别(有解析标签的功能)，而{{a}}，它给当作内容渲染了，load不识别，不识别就不管了，然后你在创建实例的时候，又把里面的东西当作模板重新再次渲染。
什么是视图：
是模板里面的东西，现在还没有加载就不是模板。什么时候是模板？created或beforeMount
在beforeMount的时候我们可以找到模板了,只是还没有加载
beforeMount(){
console.log(this.$el)
debugger;
},
4. 第四个过程 mounted
mounted 页面加载出来了，所有的节点都出来了
mounted(){
console.log(this.$el)
debugger;
},
5. 第五个过程 beforeUpdated 更新也分两个 更新前 和 更新后
beforeUpdated 数据更新前
beforeUpdate(){
console.log("数据准备更新")
debugger;
},
在虚拟 dom 中使用 differ算法，在内存中实现，Mounted之前过程就不管了，更新就加载，加载过程中不是全部都加载，如果是全部加载又要回到出发点，哪里更新了我在虚拟dom进行对比下，对比完重新在去挂载，谁变了谁去挂载，谁去更新，之前的整个dom树不会跟着你一起更新，如果跟着你更新又会回到起点(beforeCreate)，muntud之前都不管了。如果想看属性的变化可以使用 watch(属性监听)这个方法。
6. 第六个过程 Updated
Updated 更新完
更新完，在渲染，谁改变了渲染谁。不是整个dom树重新渲染
7. 第七个过程 销毁也分两个，销毁前和销毁后
销毁前 before Destory
销毁后 destroy
实例销毁需要人为触发
注意：这个地方问题很多尤其是组件拼接，组件里面套组件的时候
销毁：之前渲染好的保持不变 保留下来，后面再使用这个实例就不起作用了。
怎么销毁？
通过 vm.$destory()
三、组件的生命周期：
实例里面套组件
组件也有生命周期
嵌套组件生命周期的执行顺序：
先执行实例的vm.beforecreate -> 依然是vm.created -> 下一个还是vm.beforeMount ->这一块主要找el模板 模板里有组件，有组件开始走子组件里面的了是son.beforecreate。后期调数据的时候哪里该调哪里不该调，跟顺序有很大关系，如果调错了数据不会被更改的。
先执行实例的vm.beforecreate -> vm.created ->vm.beforeMount -> son.beforecreate -> son.created ->son.beforeMount ->继续执行 son.mountnd -> vm.mounted(又回到父级身上)
注意：正常加载是这样的：
先执行实例的vm.beforecreate -> vm.created ->vm.beforeMount ->先执行到父组件的beforeMount准备加载，再去找模板，发现模板里面有子组件然后对子组件进行渲染。son.beforecreate -> son.created ->son.beforeMount ->继续执行 son.mountnd ->，加载完之后再去加载父组件。
以上三个顺序是一样的，我给细节化，方便大家理解
注意：
1. 组件嵌套的时候数据怎么改都改不了，说明根生命周期顺序有关。
2. 请求的数据在子组件是a，但是在父组件还是原来的，所以给生命周期顺序有关。
更改组件类的数据 修改子组件的数据顺序：
先执行实例的vm.beforecreate -> vm.created ->vm.beforeMount -> son.beforecreate -> son.created ->son.beforeMount ->继续执行 son.mountnd -> vm.mounted(又回到父级身上) -> son.beforeUpdate -> son.updated
组件更新数据，只会调用自己的 beforeupdate和updated ，不会影响到其它组件的更新钩子。如果说父组件获取子组件中的标签中的内容(这个内容会被子组件修改)，父组件获取的都是修改前的内容，因为子组件的更新，不会再去触发父组件的 mounted，this. $nexTick() 它是组件中(包括子组件)所有的钩子执行完毕之后才会触发。
作者：晋飞翔
手机号(微信同步)：17812718961
如果觉得小编 写的还可以，请给小编一个鼓励的赞吧，谢谢各位朋友
网友评论