vue生命周期

一、生命周期圖示

　　生命周期可以理解為三部分，第一部分為初始化Vue實例的過程，第二部分為數據渲染，更新Dom的過程，第三部分為銷毀實例的過程，每一個部分都有對應的鈎子函數來完成對應的部分過程。

初始化階段的鈎子函數：

beforeCreate() //實例創建前：數據和模板均未獲取到 
created() //實例創建后: 最早可訪問到 data 數據，但模板未獲取到 
beforeMount() //數據掛載前：模板已獲取到，但是數據未掛載到模板上 
mounted() //數據掛載后： 數據已掛載到模板中

更新階段的鈎子函數：

beforeUpdate() //模板更新前：data 改變后，更新數據模板前調用

updated() //模板更新后：將 data 渲染到數據模板中

銷毀階段的鈎子函數：

beforeDestroy() //實例銷毀前

destroyed() //實例銷毀后

二、實例演示

1、beforeCreate

Vue 實例創建前被調用，數據和模板均未獲取到

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },
        beforeCreate(){
            console.log('beforeCreate',this.$el,this.$data)
        }


    })

</script>

2、created

  Vue實例創建后，最早可以獲取到 data數據的鈎子，但是模板未獲取到

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },

        created(){
            console.log('created',this.$el,this.$data)
        }

    })

</script>

3、beforeMount

數據掛載之前，獲取到了模板，但是數據還未掛載到模板上

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },

        beforeMount(){
            console.log('beforeMount',this.$el,this.$data)
        }

    })

</script>

4、mounted

數據已經掛載到模板中了

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },

        mounted(){
            console.log('mounted',this.$el,this.$data)
        }

    })

</script>

5、beforeUpdate

當data 數據更新之后，去更新模板中的數據前調用

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },

        beforeUpdate() {
            console.log('beforeUpdate',this.$el.innerHTML,this.$data)
        }

    })

</script>

6、updated

當data 數據更新之后，去更新模板中的數據調用

<div id="app">
    {{ msg }}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'測試鈎子函數'
        },

        updated() {
            console.log('updated',this.$el.innerHTML,this.$data)
        }
    })

</script>

7、beforeDestroy

銷毀 Vue 實例之前調用

8、destroyed

銷毀 Vue 實例之后調用

三、總結

1、鈎子函數用途

每一個鈎子函數在特定的階段執行，可以利用不同鈎子函數的特性，實現不同的功能。

created函數是最早可以獲取到 data數據的鈎子，可以發送 ajax 異步請求，向后台請求數據。

mounted函數是數據已經掛載到模板中了，但是data數據一旦更新就會使虛擬DOM重新渲染頁面，也是可以發送 ajax 異步請求，向后台請求數據。

beforeDestroy函數時是在銷毀 Vue 實例之前調用，可以用於處理一些收尾工作。

2、mount

在執行created鈎子函數之后獲取到了data數據，但是沒有獲取模板，此時會問你Vue實例中是否存在"el"選項，如果沒有，就會使用這個方法手動掛載一個"el"選項。

<script>

    var vm = new Vue({

        data:{
            msg:'測試鈎子函數'
        },

    }).$mount("#app") //手動掛在el選項

</script>