Today small for everyone to explain in detail vue life cycle. I hope the exhibitions, there are places where missing, please also pointing out thank you.
First, how to understand the life cycle of Vue?
Life cycle: from scratch, to no one to process. Vue life cycle for the component or instance of it.
Simple to understand: For example, we all know that second js the timer, the timer has started, the process has been performed, and finally finished our Vue life cycle is like a timer, as there are many processes, they like a hook, like underlie each other.
1. Vue among components (some custom label) browser is unresolved.
2. That it how to use a custom label component?
The main points about several processes:
From its creation "to use it" to used "to destroy it in
3. vue instance of an object is the largest component (may also be called the root component)
What is the hook function?
Vue is because the life cycle of a sub-stage of a stage and are connected.
Two, Vue, the life cycle process is divided into four stages and eight
Let's say which of four stages:
Create create
Mount Mount (load)
Update Update
Destroy Destruction
What process is eight it:
Create Create before and after
Before and after Mount Mount
Before and after Update Update
Destroy Destroy before and after
debugger breakpoints in the work which will often get
Vue life cycle are written in Vue examples
1. The first process beforeCreate
beforeCreate instance before initialization . Data is not loaded (data), but did not display the page.
The first step is initialized before the data (data) has not got it, data has not yet exist will execute it.
// This is a function to initialize before
beforeCreate () {
console.log (this.a) // prints undefined undefined Why? I explain in the implementation of this function, no data
Debugger
}
Data not loaded yet over, often do at this stage loading request data request state, because nothing
2. The second process is created
1. Created After instance initialization . It simply requests only to the data, events, properties and so on. But it is not loaded, the page still does not show.
Often transmission data (Ajax) request at this stage, http request
Created () {
the console.log (this.a) // can request the data, but the page is not displayed
Debugger
}
2. After you created this property or $ el invisible, it will be created and beforeMount determine if there is an $ el this option.
3. Create the beforeMount have determined:
1. Create beforeMount mainly to find templates that are virtual
2. Create - process between> between beforeMount vue will find there is no option el, put him there as a template, not by vm $ mount () this method in the options to mount.
Plainly you can specify a template by el: "# app" is specified, you can () to specify by 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
如果觉得小编 写的还可以，请给小编一个鼓励的赞吧，谢谢各位朋友