<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}:{{count}}</h1>
        <button @click="add()">按一下加一</button>
        <button @click="destroy()">按下销毁VM</button>
    </div>
    <script>
        // 初始阶段,挂载阶段,更新阶段,销毁阶段
        // 一共是四个阶段,八个钩子函数
        // 初始阶段beforeCreate创建前,created创建后
        // 挂载阶段beforeMount挂载前,mounted挂载后
        // 更新阶段beforeUpdate更新前,updated更新后
        // 销毁阶段beforeDestroy销毁前,destroyed销毁后
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                count : 1
            },
            methods : {
                add()
                {
                    this.count++;
                },
                destroy()
                {
                    this.$destroy();
                }
            },
            // 整个过程的实现
            // new Vue(),VM实例就出现了
            // vm对象在这里创建
            // 事件对象&生命周期产生了
            // 初始阶段,虚拟dom生成
            beforeCreate(){
                console.log("VUE对象初始化了");
                // beforeCreate阶段还没实现数据代理和数据监测
                // 所以根本访问不到我们的代理数据
                console.log(this.count);
            },
            // 数据代理和数据监测的创建
            created(){
                console.log("created");
                // 这里就可以访问到我们的代理数据了
                console.log(this.count);
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
            },
            // 初始阶段,el有,template也有,最终编译template模板语句
            // el有,template没有,最终编译el模板语句
            // el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续
            // 如果el没有,也没有template,最终编译el模板语句
            // 结论是流程需要继续,el必须存在
            // el和template同时存在,优先选择template,如果没有template,才会选择el
            // 挂载阶段,真实dom生成
            beforeMount(){
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("beforeMount");
            },
            // 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别
            // 页面上他们都显示大胡子,因为数据还没有实现挂载的
            // 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载
            // 也就是所谓的没有生成实际的dom树
            // 我们现在的所谓修改也就是内存上修改而已
            mounted(){
                // 挂载是通过创建一个$el并用它取代了页面上的el
                // mounted处真实的dom也就生成了
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("mounted");
                // 此处已经挂载完了,已经覆盖掉我们页面上的元素了
                // 所以这里的修改会保留到我们的页面上
                // 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了
                // 在这前面都没有diff算法,和新旧虚拟dom比较这种说法
            },
            // 更新阶段
            beforeUpdate(){
                console.log("VUE对象的data更新了");
            },
            updated()
            {
                console.log("updated");
            },
            // 销毁阶段
            beforeDestroy(){
                console.log("VM对象销毁了");
            },
            destroyed()
            {
                console.log("destroyed");
            }
        });
    </script>
</body>
</html>