1. 程式人生 > >vue的生命周期

vue的生命周期

doc led 銷毀 pil log bsp span pan 編譯

vue生命周期

鉤子函數:

1、created ----- 實例已經創建的時候執行,也就是new Vue成功了之後執行

2、beforeCompile ----- 實例創建完了, 編譯之前

3、compiled ----- 編譯之後

4、ready ----- 插入到文檔中

5、beforeDestroy ----- 銷毀之前

6、destroyed ----- 銷毀之後

     window.onload=function(){
                var vm= new Vue({
                    el:‘#box‘,
                    data:{
                        msg:‘Hello word‘
                    },
                    created:function(){
                        alert(‘實例已經創建‘)
                    },
                    beforeCompile:function(){
                        alert(‘編譯之前‘)
                    },
                    compiled:function(){
                        alert(‘編譯之後‘)
                    },
                    ready:function(){
                        alert(‘插入到文檔中‘)
                    },
                    beforeDestroy:function(){
                        alert(‘銷毀之前 ‘)
                    },
                    destroyed:function(){
                        alert(‘銷毀之後‘)
                    }
                    
                });
                 document.onclick=function(){
                    vm.$destroy()      //讓銷毀管用
                };
           };       

vue的生命周期