# Vue 生命周期笔记
生命周期
什么是生命周期？
一个实例从创建到销毁的一个过程。
vue初始化做了什么？
创建vue实例后，调用init方法，做了以下事情：
```
// 初始化生命周期
//
initLifecycle(vm)
// 初始化事件中心
initEvents(vm)
// 初始化渲染
initRender(vm)
callHook(vm, 'beforeCreate')
// 初始化注入
initInjections(vm) // resolve injections before data/props
// 初始化状态
// 初始化 props、data、methods、watch、computed 等属性
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
// 在初始化最后，如果检测到有el属性，则调用函数挂载vm
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
```
有哪些生命周期？分别做了什么？生命周期的执行过程？
--> 首先创建一个vue实例，Vue(),然后执行初始化init()函数，初始化生命周期、事件中心、渲染;
--> 然后调用beforeCreate：这里拿不到任何数据，数据观察(dataobserver)和事件配置(event/watcher)都没有准备好，没有数据，没有dom
--> 初始化data数据，实现监听，初始化vue内部事件，进行属性和方法的计算。
--> 初始化完成，调用created：这里可以调用methods中的方法，修改data数据， 并且可触发computed重新计算，watch变更等。但是dom还没有挂载，无法访问$el。
--> 然后进行模板编译：将data的数据，和vue的模板语法编译成html，这里会分两种情况，1.是实例内部有模板属性，直接调用，然后用render函数渲染，2.是没有模板属性调用外部html
--> 模板编译完成后，调用beforeMount：这里也可以拿到data数据，可以拿到el，且成功关联到了dom，但是此时的data，并没有渲染到页面中。
--> 然后执行render函数，将渲染的内容挂载到dom节点上
--> 挂载完毕，调用mounted：在这里，dom挂载完毕，data也已经渲染到页面中。mounted仅执行一次。
--> 数据发生变化，调用beforeUpdate：当检测到我们要修改数据的时候，就会触发beforeUpdate的钩子
--> 然后Vue会利用diff算法重新比较新的虚拟dom和旧的虚拟dom，对页面重新渲染。
--> 更新完成，执行updated：当修改vue的data时，vue会自动帮我们更新渲染视图，此时页面上是最新的数据，
避免在这期间更改状态，可能会导致无限循环 钩子不常用，一般用computed，watch
--> 在销毁之前触发，beforeDestroy：所有实例都可以用
--> 然后解除绑定，销毁子组件，事件监听器
--> 销毁完毕，调用destroyed：销毁之后，所有的事件监听器会被移除，所有的子实例也都会被销毁
子组件的生命周期
Vue 实例
复制代码
没有显示和隐藏的情况下
第一种情况：
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> mounted
复制代码
有v-if控制子组件的显示和隐藏。
v-if初始值为true，顺序同第一种情况
v-if初始值为false,且一直不为true，子组件的生命周期不会触发。
v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时，顺序同第一种情况
v-if初始值为false,在父组件的(mounted)生命周期将变为true时，顺序如下：
第二种情况：
父 --> beforeCreate
父 --> created
父 --> beforemount
父 --> mounted
父 --> beforeUpdate
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> updated
复制代码
有v-show控制子组件的显示和隐藏。
v-show初始值为true，顺序同第一种情况。
v-show初始值为false,且一直不为true，顺序同第一种情况。
v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时，顺序同第一种情况。
v-show初始值为false,在父组件的(mounted)生命周期将变为true时，顺序如下：
第三种情况
```bash
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> mounted
父 --> beforeUpdate
父 --> updated
```
孙组件的生命周期
```html
Vue 实例
```
没有显示和隐藏的情况下，子组件和孙组件都不隐藏
第一种情况：
```bash
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> mounted
```
子组件由v-if控制，孙组件无控制
v-if初始值为true，顺序同第一种情况
v-if初始值为false,且一直不为true，子组件和孙组件的生命周期不会触发。
v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时，顺序同第一种情况。
v-if初始值为false,在父组件的(mounted)生命周期将变为true时，顺序如下：
第二种情况：
```bash
父 --> beforeCreate
父 --> created
父 --> beforemount
父 --> mounted
父 --> beforeUpdate
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> updated
```
子组件由v-show控制，孙组件无控制。
v-show初始值为true，顺序同第一种情况。
v-show初始值为false,且一直不为true，顺序同第一种情况。
v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时，顺序同第一种情况。
v-show初始值为false,在父组件的(mounted)生命周期将变为true时，顺序如下：
第三种情况
```bash
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> mounted
父 --> beforeUpdate
父 --> updated
```
其实从上面看，就可以总结出来子孙组件的生命周期。
如果子组件被v-if控制，且初始值为false，那么子组件一开始就不会被渲染，没有执行生命周期。
如果子组件被v-if控制，且初始值为true，或者子组件被v-show控制，不论初始值，或者，子组件在父组件的created,beforemount阶段显示值为true，那么，子组件总是会在父组件beforemount之后开始执行生命周期。
如果子组件在父组件的mounted阶段被渲染出来，这里会分两种情况，
第一种是v-show，因为v-show无论为true还是false,它都会存在dom节点，在父组件生命周期的beforemount之后，子组件已经开始执行自己的生命周期，直到父组件mounted阶段之后，这一轮生命周期已经完成，data已经有了，页面也已经渲染完毕。所以，当v-show的子组件变为true显示后，会触发父组件的更新函数。
第二种是v-if，因为v-if如果为false，是不会存在节点的，也就一开始不会显示，也就不会执行生命周期，所以，当v-if的子组件被渲染显示后，也会触发父组件的更新函数，不同的是，v-if子组件会在父组件的beforeupdate之后开始执行它的生命周期。
引申提问：
Vue的beforeCreate钩子函数意义在哪里?我们可以在里面实现哪些特殊效果？
1.可以加载一些在页面渲染前出现的内容，比如loading动画
2.可以做页面拦截，和重定向。