<!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>
        <h1 v-text="count"></h1>
    </div>
    <script>
        // 初始阶段,挂载阶段,更新阶段,销毁阶段
        // 一共是四个阶段,八个钩子函数
        // 初始阶段beforeCreate创建前,created创建后
        // 挂载阶段beforeMount挂载前,mounted挂载后
        // 更新阶段beforeUpdate更新前,updated更新后
        // 销毁阶段beforeDestroy销毁前,destroyed销毁后
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                count : 1
            },
            methods : {
                add()
                {
                    // 高版本的VUE会将所有的事件监听器移除,包括自带的事件监听器在内
                    console.log("add");
                    this.count++;
                },
                destroy()
                {
                    this.$destroy();
                }
            },
            watch : {
                count()
                {
                    // 销毁以后,就不能监视了
                    console.log("监视一次");
                }
            },
            // 整个过程的实现
            // 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比较这种说法
            },
            // 更新阶段,data发生变化重新渲染
            beforeUpdate(){
                // 数据data已经发生变化,但是仅是内存中的数据变动了
                // 实际的dom还没有发生变化
                console.log("VUE对象的data更新了");
                // 内存的值已经变化了,页面上的实际dom没有变化
            },
            // 在这里dom会借diff算法比对重新渲染和修补,如何到updated
            updated()
            {
                console.log("updated");
                // 到这里的时候,内存的虚拟dom和页面上的实际dom数值一致
            },
            // 销毁阶段,卸载所有,销毁vm
            beforeDestroy(){
                // 销毁前尽管也有绑定关系,但是监视器在内的已经完全失效了
                this.count = 1000;
                // 监视器没有作用了已经,页面也不会刷新了
                // 只有内存中的数据变化了,实际dom没区别
                console.log("VM对象销毁了");
                console.log(this);
            },
            // VM销毁了以后,VM对象其实还是存在于内存中的
            // 只是将VM的监视器,子组件,自定义事件监听器等解绑了(卸载)
            // 只要不关闭浏览器,VM对象就还在内存里面
            // 因此,我们也可以称之为解绑前和解绑后更为精准
            destroyed()
            {
                console.log("destroyed");
                console.log(this);
            }
            // 销毁以后指令也失灵了
        });
    </script>
</body>
</html>