<div id="app">
    <h1 id="h3">{{msg}}</h1>
    <input type="button" value="change" @click="msg='hello'">
</div>

        {
            // 生命週期鉤子=生命週期函式=生命週期事件
            let vm = new Vue({
                el: '#app',
                data: {
                    msg: "ok"
                }
 
,
                methods: {
                    show() {
                        console.log(hello);
                    }
                },
                //基礎資料方法載入
                beforeCreate() {
                    //第一個生命週期函式，表示例項完全被創建出來之前，會執行它
                    console.log(this.msg, this.show)
 
;//undefined undefined
                    //注意：在 beforeCreate 生命週期函式執行的時候，
                    // data 和 methods中的資料都還沒用被初始化
                },
                created() {
                    //第二個生命週期函式
                    //在created 中，data 和methods 都已經被初始化好了
                    console.log(this.msg, this.show)
 
;//ok   ƒ show(){}
                    //如果要呼叫methods 中的方法，或者操作data 中的資料，最早，只能在created 中操作
                },
                //模板替換
                beforeMount() {
                    //這是遇見第三個生命週期函式，表示模板已經在記憶體中編譯完成了，
                    // 但是尚未吧模板渲染到頁面中
                    console.log(document.getElementById('h3').innerText);//{{msg}}
                    //在beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，
                    // 只是之前寫的一些模板字串
                },
                mounted() {
                    //這是遇見的第四個生命週期函式，表示，記憶體中的模板，
                    // 已經真實的掛載到了頁面中，使用者已經可以看見渲染好的頁面了
                    console.log(document.getElementById('h3').innerText);//ok
                    //注意：mounted是例項建立期間的最後一個生命週期函式，
                    // 當完成mounted 就表示，例項已經完全建立好了，此時如果沒有其他操作，
                    // 例項在記憶體中不變
                },
                //執行中的兩個事件
                beforeUpdate() {
                    //這是遇見的第五個生命週期函式，表示，
                    // 我們的介面還沒有被更新，（但是，資料被更新了）
                    //資料未改變時則什麼都沒有

                    //資料改變：ok——>hello
                    console.log(document.getElementById('h3').innerText);//ok
                    console.log(this.msg);//hello
                    //得出結論：當執行 beforeUpdate時，頁面中顯示的資料還是舊的，
                    //此時data資料是最新的，頁面尚未和最新資料保持同步
                },
                updated(){
                    //這是遇見的第六個生命週期函式，表示，介面和資料都更新了
                    //資料改變：ok——>hello
                    console.log(document.getElementById('h3').innerText);//hello
                    console.log(this.msg);//hello
                    //updated事件執行的時候，頁面和 data資料已經保持同步了
                },
                //銷燬
                beforeDestroy() {
                    console.log(this.msg);//無
                    //這是遇見的第七個生命週期函式，表示，vue開始從執行階段進入銷燬階段；
                    //例項身上所有的data 和所有的methods，
                    //以及過濾器,指令...都處於可用狀態，此時，還沒有真正執行銷燬的過程
                },
                destroyed(){
                    console.log(this.msg);//無
                    //這是遇見的第八個生命週期函式，表示，元件已經完全被銷燬了，
                    //此時，組建中所有的資料，方法，指令，過濾器...都不可用
                }
            })
        }