vue的生命周期及使用场景

vue的生命周期及使用场景

（1）创建前：beforeCreate(){}

此时还访问不到data中的属性以及methods中的属性和方法，可以在当前生命周期创建一个loading事件，在页面加载完成之后将loading移除。

（2）创建完成：created(){}

当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性；当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上，在当前生命周期中我们可以进行前后端数据的交互(注：在vue项目中，我们在进行前后端交互时一般不用ajax,因为我们只是想单纯的使用ajax，但是却要引入整个jQuery，在一定程度上降低了性能，再者vue本身设计就是尽量减少DOM元素的操作，但jQuery却是注重DOM元素的操作，这就有点不合理，所以，一般用axios)。

拓展：axios与ajax的区别及优缺点

		区别：axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios
		ajax：
				1、本身是针对MVC编程，不符合前端MVVM的浪潮；
				2、基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理（采取个性化打包方案又不能享受cdn服务）；
				3、ajax不支持浏览器的back按钮；
				4、安全问题ajax暴露了与服务器交互的细节；
				5、对搜索引擎的支持比较弱；
				6、破坏程序的异常机制；
				7、不容易调试。
		axios：
				1、从node.js创建http请求；
				2、支持Promise API；
				3、客户端防止CSRF（网站恶意利用）；
				4、自动转化json数据；
				5、提供了一些并发请求的接口。

（3）挂载前：beforeMount(){}

模板与数据进行结合，但是还没有挂载到页面上，因此我们可以在当前生命周期中进行数据的修改。

（4）挂载完成：mounted(){}

当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素，还可以在当前生命周期中做方法的实例化，给元素添加一个ref属性，且值必唯一，通过：this.$refs.属性获取DOM元素。

（5）更新前：beforeUpdate(){}

当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化，当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改。

（6）更新完成：updated(){}

数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构（注：在当前生命周期中如果做实例化操作的时候须做条件判断）。

（7）销毁前：beforeDestroy(){}

当前生命周期中我们需要做事件的解绑，监听的移除，定时器的清除等操作。

（8）销毁完成：destroyed(){}

当前生命周期中我们需要做事件的解绑，监听的移除，定时器的清除等操作。（注：被keep-alive包裹的组件，不会被销毁，而是被缓存起来）。

（9）缓存组件激活时：activated(){}

被 keep-alive 缓存的组件激活时调用。

（10）缓存组件失活时：deactivated(){}

被 keep-alive 缓存的组件失活时调用。

（11）后代组件错误时：errorCaptured

捕获到后代组件错误时使用，请慎用，运用不当会陷入无限循环中。