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

Posted 2020-11-24 zongzizi

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与页面之间的关联进行断开