初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群)：757345416

先上圖:

下面我們用例項來理解生命週期：

<div class="test" style="border: 1px black dashed;padding: 8px;">
            <p>{{demo}}</p>
            <button v-on:click="change">點選改變a值</button>            
        </div>
        <button>銷燬Vue例項在控制檯輸入vm.$destory()</button>
        <script type="text/javascript">
            var vm = new Vue({
                el: ".test",
                data: {
                    demo: "繫結myValue.a的值"
                },
                methods:{
                  change:function(){
                    this.demo="這是改變後的";
                  },
                  destory1:function(){
                     this.$destory();
                  }
                },
               beforeCreate:function(){
                    console.log("元件例項剛被建立，元件屬性計算之前");
               },
               created:function(){
                    console.log("元件例項建立完成，屬性已繫結，但DOM未生成，$el屬性還不存在。 ");
               },
               beforeMount:function(){
                    console.log("模板編譯/掛載之前");
               },
               mounted :function(){
                    console.log(" 模板編譯/掛載之後    ");
               },
               beforeUpdate: function(){
                    console.log("元件更新之前  ");
               },
               updated:function(){
                    console.log("元件更新之後  ");
               },
               beforeDestroy:function(){
                    console.log("元件銷燬之前  ");
               },
               destroyed:function(){
                    console.log("元件銷燬之後");
               }
        });
        </script>
 

文章到此結束，希望對你的學習有幫助！