vue的生命周期以及使用场景

vue

1.beforeCreate(){}

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

2.created(){}

　　创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性

　　当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上

　　在当前生命周期中我们可以进行前后端数据的交互(ajax请求)

　　　　----拓展  axios与jquery的ajax有什么不同

　　　　　　　axios的优点：

　　　　　　　　　　1、从nodejs中创建http请求

　　　　　　　　　　2、支持promiseAPI

　　　　　　　　　　3、提供了一些并发请求的接口

　　　　　　　　　　4、自动转换json数据

　　　　　　　　　　5、客户端支持防止CSRF/XSRF

　　　　　　　　ajax的缺点：

　　　　　　　　　　　　1、jQuery项目庞大，单纯的使用ajax却要引入整个Jquery非常不合理

　　　　　　　　　　2、基于原生的XHR开发，但是XHR架构并不清晰

3. beforeMount(){}

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

4.mounted(){}

　　当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素

　　如何获取DOM元素

                1、给元素添加一个ref属性值必须是唯一的

                2、使用：this.$refs.属性

            　　还可以在当前生命周期中做方法的实例化

5. beforeUpdate(){}

　　当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化

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

6.updated(){}

　　数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构

　　注意： 

　　　　在当前生命周期中如果做实例化操作的时候切记要做条件判断

7. beforeDestroy(){}

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

8. destroyed(){}

　　当前生命周期执行完毕后会将vue与页面之间的关联进行断开

 

 

当<keep-alive>包裹动态组件的时候会触发两个新的生命周期

　　　　---什么是动态组件呢？

　　　　　　让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件          

　　　　　　通过保留<component></component>元素,绑定is特性进行动态切换可以实现动态组件

　　　　--- 包裹动态组件(组件)时，会缓存不活动的组件实例,而不是销毁它们组件切换调用的时候本身会被销毁掉的，

　　　　　只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来,下一次使用的时候直接从缓存中调用<keep-alive> 是一个抽象组件：

　　　　　它自身不会渲染一个 DOM 元素

　　　　---keep-alive身上有几个常用的属性include，exclude，max 

　　　　　　　　　　include :     类型：字符串或者正则表达式            解释：只有名称匹配的组件会被缓存        

　　　　　　　　　　exclude :    类型：字符串或者正则表达式            解释：任何名称匹配的组件都不会被缓存                

　　　　　　　　　　max :          类型:数字            　　　　　　　　  解释：最多可以缓存多少组件实例

9.　　activated     当组件为活跃状态的时候触发(活跃状态：进入页面的时候)

10.  deactivated     缓存状态的时候触发