Vue生命周期小结

Posted 2021-02-14 wildccy

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


        created:(*****)
            创建后:
                当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上并将data身上所有的属性添加一个getter/setter方法，在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
　　　　　　　　　　因此如果需要进行  前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在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: 
　　　　　　更新后：
　　　　
             数据更新后最新的DOM结构在当前生命周期函数中需要特别的注意，因为当前函数是一个频繁触发的函数。 因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

 　　　 beforeDestroy:* 
　　　　　　销毁前 
　　　　　　  在这个生命周期函数中，还是可以继续访问到真实的DOM结构以及data中的数据 一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作  
　　　  destroyted: 
　　　　　　销毁后：
　　　　　　　　将DOM与数据之间的关联进行断开 在当前生命周期函数中是访问不到真实的DOM结构 


　　　以上生命周期函数中 多次执行的生命周期函数 1、beforeUpdate 2、updated* 
　　　组件第一个创建的时候会执行哪些生命周期函数 beforeCreate created* beforeMount mounted*