每次講起這個，總是模棱兩可的，今天花點時間總結一下
所謂生命周期，就是Vue 實例從創(chuàng)建到銷毀的過程。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。

beforeCreate

beforeCreate:function(){
    console.log("--------創(chuàng)建之前--------");
    console.log("此時的$data是------> " + this.$data);
    console.log("此時的test是------> " + this.test);
    console.log("此時的$el是------> " + this.$el);
},

created

created:function(){
    console.log("--------創(chuàng)建之后--------");
    console.log("此時的$data是------> " + this.$data);
    console.log("此時的test是------> " + this.test);
    console.log("此時的$el是------> " + this.$el);//此時還屬于未掛載
}

beforeMount

beforeMount:function(){
    console.log("--------掛載之前--------");
    console.log("此時的$data是------> " + this.$data);
    console.log("此時的test是------> " + this.test);
    console.log("此時的$el是------> " + this.$el);//虛擬的dom
    console.log(this.$el);
},

mounted

mounted:function(){
    console.log("--------掛載之后--------");
    console.log("此時的$data是------> " + this.$data);
    console.log("此時的test是------> " + this.test);
    console.log("此時的$el是------> " + this.$el);//真實的dom
    console.log(this.$el);
},

beforeUpdate

beforeUpdate:function(){
   console.log("--------更新之前--------");
   console.log("此時的$data是------> " + this.$data);
   console.log("此時的test是------> " + this.test);
   console.log("此時的$el是------> " + this.$el);//虛擬的dom
},

此時頁面上也更新成bbbb

updated

updated:function(){
   console.log("--------更新之后--------");
   console.log("此時的$data是------> " + this.$data);
   console.log("此時的test是------> " + this.test);
   console.log("此時的$el是------> " + this.$el);//真實的dom
},

beforeDestroy、 destroyed

beforeDestroy:function(){
   console.log("--------銷毀之前--------");
   console.log("此時的$data是------> " + this.$data);
   console.log("此時的test是------> " + this.test);
   console.log("此時的$el是------> " + this.$el);
},
destroyed:function(){
   console.log("--------銷毀之后--------");
   console.log("此時的$data是------> " + this.$data);
   console.log("此時的test是------> " + this.test);
   console.log("此時的$el是------> " + this.$el);
},

但此時在虛擬的dom中仍然能找到

但是此時修改

那么怎么讓他們再回來呢，再重新執(zhí)行下掛載方法

使用方法總結：

beforecreate : 一般頁面的loading事件會放這個里面
created ：在這結束loading，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行 ，異步請求也適宜在這里調(diào)用
mounted ： 在這發(fā)起后端請求，拿回數(shù)據(jù)，獲取到DOM節(jié)點，配合路由鉤子做一些事情
updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應函數(shù)
beforeDestroy：如果要刪除某些組件，可以在這里添加判斷 你確認刪除嗎？
destroyed ：當前組件已被刪除，清空相關內(nèi)容

面試常問題：

1.生命周期created和mounted的區(qū)別

created:在模板渲染成html前調(diào)用，即初始化某些屬性值，然后再渲染成視圖
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作
兩者比較：通常created使用的次數(shù)多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用：var id = document.getElementById(id);
通常會有這一步，而如果你寫入組件中，你會發(fā)現(xiàn)created中無法對chart 進行一些初始化配置，一定要等這個html渲染完成后才可以進行，那么mounted就是不二之選。下面看一個例子(用組件)。

<div id="app">
    <my-component></my-component>
</div>
<script>
Vue.component("my-component",{
    data:function(){
        return {
            cname:"",
            id:"",
            pname:""
        }
    },
    template:"<ul><li id='classify'>{{cname}}</li><li>{{id}}</li><li>{{pname}}</li></ul>",
    created:function(){
        this.cname="食品飲料"
        this.id = 3
        this.pname ="休閑食品"
        var classify = document.getElementById("classify");//第一個命令臺錯誤
        console.log('0000')
        console.log(classify.innerHTML,'created');
    },
    mounted:function(){
        var classify = document.getElementById("classify");//第二個命令臺輸出的結果
        console.log(classify.innerHTML,'mounted');
    }
});
var vm = new Vue({
    el:"#app"
})
</script>

頁面

控制臺

不難發(fā)現(xiàn)，created賦予初始值的情況下頁面成功渲染出來了，但控制臺中卻報錯了，但是打印出000說明還是有走到這一步的，實際上是因為找不到id,即getElementById(id)并沒有找到元素，原因是在created的時候，視圖的html并沒有渲染出來，所以此時去操作html的dom節(jié)點，并不能找到相關元素，而在mounted里，此時的html已經(jīng)渲染出來了，所以可以直接操作dom節(jié)點，所以可以打印出來

2.DOM 渲染在 什么周期中就完成

DOM 渲染在 mounted 中就已經(jīng)完成了。

3.第一次頁面加載會觸發(fā)哪幾個鉤子函數(shù)

beforeCreate, created, beforeMount, mounted
參照的文章(寫這篇文章，拖得周期比較長，之前也參照許多好的文章，所以并不完整，感謝！)：
https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/83280530
https://blog.csdn.net/xdnloveme/article/details/78035065