zoukankan      html  css  js  c++  java
  • Vue生命周期

      昨天简单介绍了一下生命周期是什么,以及生命周期的几个阶段,今天具体介绍一下生命周期各个阶段都是干什么的叭!

      beforeCreate(创建前):

       当前生命周期函数主要做初始化工作,可以创建一个loading。

      Created(创建后*****):

         1.当前生命周期函数中我们可以访问到vm身上所有的属性和方法

       2.当前生命周期函数会将data中所有属性和方法都挂载到vm的实例身上

       3.当前生命周期会给所有data对象里的属性添加getter/setter方法,因此如果需要进行前后端数据交互时必在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行绑定,这个属性身上不会有getter/setter方法,这个数据也无法动态得进行改变

      beforeMount(挂载前):

       1.在这个生命周期中,数据和模板还没有进行相结合

       2.在这个生命周期中可以对数据进行最后的修改(第一次显示在浏览器中的数据,update之前的数据)

       3.当前生命周期中获取不到真实的DOM结构

      Mounted(挂在后):

       1.在这个生命周期中数据和模板已经结合,可以通过this.$refs获取到真正的DOM结构($refs:ref="值必须在DOM中唯一",ref是给DOM元素添加的属性)

        补充:ref和document的区别:document从整个页面找DOM元素(已插入到页面),ref是从当前vue的虚拟DOM中找到的当前元素(虚拟DOM参见https://www.cnblogs.com/gaosong-shuhong/p/9253959.html),是从内存中找到的DOM结构(虚拟DOM是真实的JS对象,可放在内存中,访问内存的速度比访问页面元素快得多)

       2.在这个生命周期中可以做一些new操作

      beforeUpdate(更新前):

       1.当data中的数据发生改变时才会执行这个周期中的函数

       2.可以对数据进行最后的修改(更新后的数据)

       3.可以访问到真实的DOM结构

       4.当前生命周期中的数据和模板还没有更新完毕

      Updated(更新后):

       1.可以访问到数据更新后最新的DOM结构

       2.当前生命周期函数会被频繁触发,因此在当前周期做事件绑定或实例化时,要提前做判断,否则会导致内存泄露.

      beforeDestory(销毁前*):

       在这个生命周期函数中可以访问真实DOM结构和data中的数据,一般在这个声明周期函数中做解绑/移除操作。

      Destoryed(销毁后):

       1.将DOM与数据间的关联进行断开

       2.在当前生命周期函数中访问不到真实的DOM结构    

      以上生命周期函数中,多次执行的有:beforeUpdate,Updated.

      组件第一次创建的时候会执行beforeCreate,Created,beforeMount,Mounted。

      本文介绍了生命周期各个阶段都是干嘛的,接下来再撸一篇文章详细介绍每个阶段的代码,并对每个阶段进行解剖式分析,波波(●´З`●)

      

  • 相关阅读:
    机器学习之数据预处理
    使用Python一步一步地来进行数据分析总结
    深入对比数据科学工具箱:Python和R之争
    机器学习算法中的过拟合与欠拟合
    监督学习与无监督学习
    Python数据分析之pandas学习
    Python数据分析之numpy学习
    Dart语言学习(二) Dart的常量和变量
    Dart语言学习(一)为什么学习Dart?
    iOS项目中集成Flutter的最新适配升级
  • 原文地址:https://www.cnblogs.com/douzizuikeai/p/10563215.html
Copyright © 2011-2022 走看看