Vue的生命周期
生命周期图示.png
什么是生命周期钩子？
所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。
他们在对应的阶段做对应的事。共分为8个阶段，接下来一一介绍：
beforeCreate
当前生命周期是Vue初始化的时候执行的钩子函数，此时，data和methods还未将自身属性和方法代理到Vue的实例上。因此，在当前生命周期不能访问data中的属性和methods中的方法。
当前生命周期在执行时组件还未创建，因此，可以在当前组件中进行loading动画的显示。
created创建后*
当前生命周期函数是组件在创建后执行的，因此，可以在当前生命周期中进行前后端数据的交互。
当前生命周期在执行的时候，会将data的属性进行数据劫持，给每一个属性添加getter和setter方法。
当前生命周期在执行时，会将data的属性和methods的方法代理到Vue的实例中。
beforeMount挂载前
当前生命周期是组件挂载在页面之前会执行的钩子函数，数据也初始化完成，但是数据的双向绑定还是显示{{}}，可以在当前生命周期中对数据进行最后的修改。（这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。）
当前生命周期中的数据和模板还未进行结合，因此，访问不到真实的DOM结构。
mounted挂载后*****
当前生命周期在组件被挂载到页面的时候执行的函数，数据和模板已经结合，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。可以通过this.$refs访问真实的DOM结构。
场景：在当前的生命周期函数中进行的实例化（Swiper BScroll echarts）
ref语法：
给需要获取真实DOM结构的元素添加ref属性。（名字必须唯一）eg:<p ref="name"></p>
通过this.$refs.名字进行访问真实的DOM结构
beforeUpdate更新前*
当前生命周期函数中，只要是页面数据改变了都会触发，但更新的数据还未和模板结合，可以访问到真实的DOM结构，并且能够对更新的数据的检测和做最后的更改 。
updated更新后*
当前生命周期函数中数据和模板已经进行相结合，可以在这里获取最新的DOM结构。
如果在当前生命周期函数中进行实例化操作时，要进行边界条件的判断，否则会造成性能消耗。
new操作执行的时候做了哪些事情？
开辟一块内存空间，创建一个空对象
将所创建的对象的__ proto __指向构造函数的prototype
执行构造函数中的代码，将this的指向，指向当前的内存空间
返回该对象（除非构造函数中返回了一个对象或者函数）
beforeDestory销毁前*
当前生命周期会在组件被销毁的时候去执行，可以访问到真实的DOM结构，进行事件的解绑，定时器的清除。
destroyed()销毁后
在当前生命周期断开了与vue的关联，访问不到真实的DOM结构。
（对象停止并从内存中删除）
keep-alive
keep-alive是Vue的内置组件，其中的生命周期只会走一遍，并且会增加activated和deactivaed生命周期，用以其他的业务逻辑。
通常用来包裹动态切换的路由或组件，防止组件频繁地创建和销毁，从而达到性能优化的效果。
keep-alive常用的属性
include：字符串或正则表达式。匹配的组件会被缓存。
exclude：字符串或正则表达式。匹配的组件都不会被缓存。
max：数字。最多可以缓存多少组件实例。
activated活跃状态
当前组件显示时执行的生命周期
deactivated缓存状态
当前组件缓存时执行的生命周期
errorCaptured
当捕获一个来自子孙组件的错误时被调用。
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
作者：learninginto
链接：//www.greatytc.com/p/5fed3ec082c2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
