1、什麼是生命週期

　　從Vue例項建立、執行、到銷燬期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命週期！

2、vue生命週期鉤子函式

　　生命週期函式=生命週期事件=生命週期鉤子

3、vue生命週期

4、案例

 <div id='app'>{{title}}
        <button @click="title+=1">更改資料</button>
        <input type="text" v-model.number="num1">
        <input type="text" v-model.number="
 
num2">
        <span>{{sum}}</span>
    </div>
    <script>
        const vm = new Vue({
            // el: '#app',
            data: {
                title: '啦啦',
                num1: 0,
                num2: 0,
                sum: 0,
            },
            //元件建立階段的4個生命週期函式
            
 
//介面重定項，拿不到data裡的資料
            beforeCreat() {
                console.log("vue例項建立之前執行");
            },
            //最早可以對資料初始化的地方，可以拿到data裡的資料
            created() {
                console.log("vue例項建立之後");
            },
            //準備好了編譯的模板，但是沒有渲染到介面上，可以拿到$el
            beforeMount() {
                console.log(
 
"介面掛載之前");
            },
            //依賴於DOM的初始化可以放在這裡
            mounted() {
                console.log("介面已經渲染好了");
            },
            //執行階段的生命週期函式
            //資料已經更新了，但介面沒有更新。。。。可以在介面更新之前,修改data
            beforeUpdate() {
                console.log("介面更新之前");
                this.sum = this.num1 + this.num2;
                //注意事項：不要在非同步操作裡修改data,否則會產生迴圈呼叫
            },
            //data上的資料和介面上的資料同步，如果介面改變了，有些元件可能需要重新渲染，渲染操作可以放在這裡
            update() {
                console.log("介面更新之後");
            },
            beforeDestory() {
                //銷燬之前，清除事件監聽和計時器或者定時任務
            },
            destroyed() {
                //銷燬之後
            }
        })
        vm.$mount("#app");