vue生命週期鉤子

生命週期函數：Vue實例在某個時間點會自動執行的函數

 Vue在創建執行銷燬的過程中，有周期生命鉤子去監聽。週期生命鉤子不寫在methods中，而是跟methods同一級別。

<div id="demo"> 
    </div>
    <script>
       
        var vm = new Vue({
            el: '#demo',
            template: "<div v-on:click='count++'>{{count}}</div>",
            data: {
                count: 0
            },
            beforeCreate: function(){
                console.log('vue創建時，執行')
            },
            created: function(){
                console.log("vue創建完成後執行")
            },
            beforeMount: function(){
                console.log("將要進行頁面渲染時，執行")
            },
            mounted: function(){
                console.log("頁面渲染後執行")
            },
            beforeUpdate: function(){
                console.log("將要更新數據時，執行")
            },
            updated: function(){
                console.log("更新數據後執行")
            },
            beforeDestroy: function(){
                console.log("在vue實例將要銷燬的時候，執行")
            },
            destroyed: function(){
                console.log("vue實例銷燬後執行")
            }
        })
    </script>

結果：頁面刷新的時候，會執行創建vue和頁面渲染相對應的四個週期生命鉤子，當點擊的時候，數字發生變化，此時觸發beforeUpdate和updated函數，當銷燬vue時，如下圖，會觸發beforeDestroy和destroyed函數 

注意：vue實例中也可以寫template模板，其效果是div標籤和html中的div標籤是同一個標籤。

2. 關於vue的響應式數據，

只有vue被創建時data中已存在的屬性，纔可以是響應式的，而後來給data對象添加的屬性是不能響應式的

Object.freeze（對象）方法，不允許該對象內的屬性具有響應式效果