<div id="app">
  <!-- <h2 v-text="num"></h2> -->
  <h2>Current Number：{{num}}</h2>
  <button @click="add">Number+1</button>
  <button @click="bye">销毁Vue实例</button>
</div>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {
      num: 1,
    },
    methods: {
      add() {
        console.log('add.');
        this.num++
      },
      bye() {
        console.log('Bye.');
        /**
         * vm.$destroy()：
         * 销毁vm，清理它与其它实例的连接，解绑全部指令及事件监听器（自定义事件）
         * 但是在销毁之前vm对页面所作的改变，在销毁之后依旧呈现在页面中
         * 销毁了vm之后仅仅意味着没有vm来管理页面的修改了
         * 在某些Vue版本（如 2.6.12）中，销毁了vm后事件绑定的函数依然可以被调用
         */
        this.$destroy()
      },
    },
    watch: {
      num() {
        console.log('The [num] was updated.');
      },
    },

    /**
     * 生命周期和事件初始化完成
     */
    beforeCreate() {
      console.log('beforeCreate.');
      console.log(this);  // Vue 实例中还没有 _data
      debugger  // 断点
    },
    /**
     * 数据监测和数据代理初始化完成
     */
    created() {
      console.log('created.');
      console.log(this);
      debugger
    },

    /**
     * 模板解析完成，已生成虚拟DOM
     */
    beforeMount() {
      console.log('beforeMount.');
      console.log(this);
      document.getElementsByName('h2')[0].innerText('Hello')
      debugger
    },
    /**
     * 虚拟DOM已经转为真实DOM插入页面
     */
    mounted() {
      console.log('mounted.');
      console.log(this);
      console.log(this.$el);
      console.log(this.$el instanceof HTMLElement);
      debugger
    },

    /**
     * data 更新后重新编译页面之前
     */
    beforeUpdate() {
      console.log('beforeUpdate.');
      console.log(this.num);
      debugger
    },
    /**
     * data 更新之后页面已经编译完成
     */
    updated() {
      console.log('updated.');
      console.log(this.num);
      debugger
    },

    /**
     * vm被销毁之前
     */
    beforeDestroy() {
      console.log('beforeDestroy.');
      this.add()  // 此时已经不能对页面做出更改了
      console.log(this.num);
      debugger
    },
    /**
     * vm已经被销毁
     */
    destroyed() {
      console.log('destroyed.');
    },
  });
</script>