002 Vue 生命周期

Vue的生命周期

            vue从创建，初始化数据，模板编译，DOM挂载，渲染，更新，渲染和销毁的整个过程，叫做Vue的生命周期

 

生命周期函数有8个：

            1. beforeCreate：创建前

            2. created：创建后

            3. beforeMount：挂载前

            4. mounted：挂载后

            5. beforeUpdate：更新前

            6. Update：更新后

            7. beforeDestroy：销毁前

            8. destroyed：销毁后

 

生命周期：事物从诞生到消亡的整个过程

       

Vue的生命周期：Vue 实例从创建、挂载，渲染，更新，销毁的一系列过程，称之为 Vue 的生命周期

        1. beforeCreate 创建前

            1. 此时已经通过实例初始化创建了vue对象，但是还没有将数据和组件挂载到模板上去，还不能操作属性

            2. 实例初始化的过程中，会遍历data对象下的所有属性并将其转化成getter/setter，也就是添加一个被观察者

            3. 因此，在项目中后来添加上的新属性在仕途上是不更新的就是因为后来添加的属性没有被放到观察对象中去

       

        2. created  实例创建后

            1. 实例创建完毕，属性已经绑定，并且属性可以被操作

            2. 但是，此时还没有挂载到DOM上去，还不能操作DOM节点，但是虚拟DOM数已经生成

            3. 这个时候可以进行网络请求等操作，但是由于这个时候页面还没有被渲染出来，如果请求事件过程，会出现长时间的白屏现象

                      

        3. beforeMount  挂载前

            1. 这个过程中进行模板编译过程

            2. el并未对数据进行渲染，还不能操作DOM

 

        4. mounted  挂在后

            1. 虚拟DOM已经渲染到真实的DOM上了，网络请求，DOM操作在这个阶段及其之后进行

            2. 渲染完成，此时css样式添加完成，已经生成了渲染树，可以获取css相关的属性了

       

        5. beforeUpdate 更新前

            数据或属性更改后，在更新前被调用，发生在虚拟 DOM 重新渲染和打补丁之前

       

        6. updated  更新后

            数据更改后，已经完成DOM的更新和渲染

 

        7. beforeDestroy    销毁前

            实例销毁之前，此时组件仍然完全可用

       

        8. destroyed    销毁后

            实例销毁之后，此时Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

        注：

            除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不被调用。