Vue的生命周期--代碼片段

Vue 執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模闆、挂載 Dom、渲染

→更新→渲染、銷毀等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 執行個體從建立到

銷毀的過程，就是生命周期。

vue的生命周期：

1.vue建立之前beforeCreated

2.建立created

3.挂載之前beforeMouted

4.挂載mouted

5.更新之前beforeUpdate

6.更新完成updated

7.銷毀之前 beforeDestory

8.銷毀完成destoryed

html部分：

<div id="app" ref="app">
        <!-- ref 用于擷取Dom屬性 -->
        {{name}}
    </div>

js部分：

<script>
    let vm = new Vue({//生命周期也是方法，不需要外在幹預
        el: "#app",
        data: {
            name: "VUE開發"
        },
        template:"<h1>this is h1 template</h1>",
        beforeCreate() {//01建立之前(資料沒有挂載，隻是一個空殼，無法操作真實的DOM和通路資料)
            console.log("将要建立")
            console.log(this.$data);//資料 undefined
            console.log(this.$el);//節點  undefined
        },
        created() {//02建立完畢，獲得初始資料，無法渲染DOM[挂載]
            console.log("建立完畢")
            console.log(this.$data);//資料 
            console.log(this.$el);//節點  undefined
        },
        beforeMount() {//03即将挂載，可以通路到DOM也可以通路原始資料
            console.log("即将挂載");
            console.log(this.$el);

        },
        mounted() {//04挂載完畢,一個vue的基本操作（mustache渲染完成），有資料，有DOM
            console.log("挂載完畢");
            console.log(this.$el);
        },
        beforeUpdate() {//05更新之前
            //控制台輸入vm.$data.name = "新值"，後觸發函數 beforeUpdate()
            console.log("即将更新渲染");
            let name = this.$refs.app.innerHTML;
            console.log("name:" + name);
        },
        updated() {//06更新完成 data中的資料已經被更新後的值替換
            console.log("更新渲染完成");
            let name = this.$refs.app.innerHTML;
            console.log("name:" + name);
        },
        //以下兩個在控制台并不能被列印出來，執行完vm.$destroy()即可答列印
        beforeDestroy () {//07銷毀之前  一般在這裡做一些善後工作，例如清除計時器等事件
            console.log("銷毀之前");
            console.log(this.$data);//資料 
            console.log(this.$el);//節點  
        },
        destroyed () {//08銷毀完成  元件的資料綁定、監聽...去掉後隻剩下 dom 空殼
            console.log("銷毀完成");
            console.log(this.$data);//資料 
            console.log(this.$el);//節點  
        } 
    });
    console.log("建立完畢後vue執行個體外的列印輸出" + vm.$data)
</script>