简单了解Vue中的生命周期

Posted 2021-02-13 zhouyingying

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

        1、组件从创建到销毁的过程
            1、创建前 创建后
            2、挂载前  挂载后
            3、更新前  更新后
            4、销毁前  销毁后
        
        beforeCreate:
            当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

        created:(*****)
            创建后:
                1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
                2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上
                3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法，因此如果需要进行
                前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定
                那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变

        beforeMount：
            挂载前：
                数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改

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

        mounted:(*****)
            挂载后：
                数据和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构

            $refs
                ref="值必须是整个VDom中唯一";

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


                ref与document的区别？
                document是从整个页面去查找DOM结构，这个DOM结构肯定是已经插入到页面的DOM结构
                ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到的DOM结构


        beforeUpdate:
            更新前：
               当data中的数据发生了改变的时候就会执行
               1、可以访问到真实的DOM结构
               2、可以对数据做最后的修改
               3、当前生命周期函数中的数据和模板还没有更新完毕

        updated:
            更新后：
                1、数据更新后最新的DOM结构
                2、在当前生命周期函数中需要特别的注意，因为当前函数是一个频繁触发的函数。
                因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

        beforeDestroy:*
            销毁前
                1、在这个生命周期函数中，还是可以继续访问到真实的DOM结构以及data中的数据
                2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作

        destroyted:
            销毁后：
                1、将DOM与数据之间的关联进行断开
                2、在当前生命周期函数中是访问不到真实的DOM结构

        




        以上生命周期函数中
            多次执行的生命周期函数
                1、beforeUpdate
                2、updated*

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