Vue生命周期

  一个组件从创建到销毁的这个过程叫做生命周期

       一 . 组件从创建到销毁的过程

                创建前        beforCreate( )

        当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

                创建后        created( )

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

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

        3. 当前生命周期函数会将data身上所有的属性添加一个getter/setter方法,因此如果需要进行前后端数据交互的时候,必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定,那么这个属性就不会有getter/和setter方法,因此数据就不会动态的进行改变

                挂载前        beforMount( )

        1. 数据和模板还没有进行相结合.在这个生命周期函数中我们可以进行数据最后的修改

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

                挂载后        mounted( )

        1. 数据和模板已经结合,在这个生命周期函数中,我们可以通过this.$refs访问到真实的DOM结构

        2. $refs = "值必须是整个VDom中唯一",

        3. 访问的时候通过this.refs.值

                ref和document的区别?

            1. document是从整个页面去查找DOM结构,这个Dom结构肯定是已经插入到页面的DOM结构

            2. ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到DOM结构

                更新前        beforUpdate( )

        当data中的数据发生了改变的时候就会执行

        1. 可以访问到真是的DOM结构

        2. 可以对数据做最后的修改

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

                更新后        updated( )

        1. 数据更新后最新的DOM结构

        2. 在当前生命周期函数中需要特别的注意,因为当前函数是一个频繁触发的函数,

        3. 因此在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

                销毁前        beforDestory( )

        1. 在这个生命周期函数中,还是可以继续访问到真实的DOM结构以及data中的数据

        2. 一般我们会在这个生命周期函数中做一些事件解绑/移除的操作

                销毁后        destroyted( )

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

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

                以上生命周期函数中

        多次执行的生命周期函数是

            1. beforeUpdate

            2. updated

        组件第一个创建的时候会执行哪些生命周期函数

            1. beforeCreate

            2. created

            3. beforeMount

            4. mounted