  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            methods: {
                
            },
 
            // vue實例創(chuàng)建之前
            beforeCreate(){
                console.log('beforeCreate');
                console.log(this.name);
            }
    </script>

輸出數(shù)據(jù)中心的 name 是讀不到的：

created --- vue實例"創(chuàng)建后",注意：在這個函數(shù)中，可以識別 到 vue中data數(shù)據(jù)中心的數(shù)據(jù)
  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // vue實例創(chuàng)建之后
            created(){
                console.log("created");
                console.log(this.name);
            }
        })
    </script>

查看結果：

beforeMount --- DOM掛載之前 this.$el---此時的$el為“虛擬的”DOM節(jié)點

在視圖層渲染標簽:

  <div id="app">
        <p>{{name}}</p>
        <p>{{num}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // dom掛載之前
            beforeMount(){
                console.log("beforeMount");
                   //查看dom元素
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

dom掛載前輸出結果：

 mounted ---DOM掛載之后    this.$el---此時的$el為“真實的”DOM節(jié)點
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // dom掛載之后
            mounted(){
                console.log("mounted");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

查看輸出結果：

beforeUpdate --- 數(shù)據(jù)更新之前（----視圖層中的數(shù)據(jù)的前后變化）
updated --- 數(shù)據(jù)更新之后（----視圖層中的數(shù)據(jù)的前后變化）

在視圖層通過點擊讓 num 的數(shù)值發(fā)生改變來模擬數(shù)據(jù)更新，查看結果：

  
    <div id="app">
        <p id="num">{{num}}</p>
        <button @click="num++">點擊數(shù)據(jù)更新(num+1)</button>
    </div>
  // 數(shù)據(jù)更新前
            beforeUpdate(){
                console.log("beforeUpdate--數(shù)據(jù)更新前");
                // 查看dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            },
            // 數(shù)據(jù)更新后
            updated(){
                console.log("updated--數(shù)據(jù)更新后");
                // 查看dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            }

此時數(shù)據(jù)無變化時，在控制臺是看不到效果的，當我們點擊按鈕后：