vue生命周期函数

生命周期函数（钩子）（事件）

生命周期图示

1. var vm= new Vue表示开始创建一个vue实例

2. init Events&Lifecyle 表示刚初始化一个vue实例，这时候对象身上只有默认的一些生命周期和默认事件，其他东西都未创建
   

   

3. vue开始编辑模板，把vue中的指令进行执行，最终在内存中生成一个编译好的模板字符串然后把这个模板字符串渲染为内存中的DOM，此时只是在内存中渲染好了模板，并没有把模板挂在到页面中去
   

   

4. 将内存中编译好的模板真实的替换到浏览器的页面中去
   

   

---

创建期间的生命周期函数

1. beforeCreate()是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前会执行它

var vm= new Vue({
                el:'#div1',
                data:{
                    msg:'ok'
                },
                methods:{
                    show(){
                        console.log('show')
                    }
                },
                beforeCreate(){
                    console.log(this.msg)
                    }       
            })

2. 在beforeCreate()生命周期函数执行时不会拿到data和methods中的数据，证明data和methods中的数据还没有初始化
   
   
3. created()这是第二个生命周期函数，在created中data和methods都已经被初始化好了，如果调用methods中的方法，或者操作data中的数据最早只能在created中操作

created(){
                    console.log(this.msg)
                }   

4. beforeMount()这是第三个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中去

beforeMount(){
                    console.log(document.getElementById('h3').innerText)
                }

5. 在beforeMount执行的时候，页面中的元素还没有被替换过来，只有之前写的模板字符串
   
   
6. mounted()表示内存中的模板真实的挂载到页面中，用户可以看到已经渲染好的页面了

mounted(){
                    console.log(document.getElementById('h3').innerText)
                }

7. mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经完全被创建好了，此时如果没有其他操作，这个实例就会一直存在于内存中，只要执行完了mounted就表示vue实例已经初始化完毕，此时组件已经脱离创建阶段进入运行阶段

---

运行期间的生命周期函数

1. beforeupdate()这时候界面还没有被更新，但是数据被更新了

beforeUpdate(){
                    console.log('页面上的内容:'+document.getElementById('h3').innerText)
                    console.log('data中的msg:'+this.msg)
                }

2. updated()执行的时候页面和data数据已经保持同步了

---

销毁期间的生命周期函数

1. beforDestroy()执行时vue实例从运行阶段进入到了销毁阶段，实例身上所有的data和methods以及过滤器和指令都处于可用状态
2. destroyed()执行时组件已经被完全销毁，所有数据，方法都已经不可用

---