码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-04 13:38:38      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:amp   如何获取   load   loading   12px   注意   客户   setter   不同   

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

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

标签:amp   如何获取   load   loading   12px   注意   客户   setter   不同   

原文地址:https://www.cnblogs.com/zongzizi/p/11982131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!