Vue的生命周期

生命周期 => 重出生到死亡的一个过程

    Vue也自己的生命周期

        初始化阶段:执行一次

      创建阶段

          beforeCreate:创建之前

          created:创建完成            偶尔使用        有一些程序员在这里发送请求

      挂载阶段

          beforeMount:挂载之前

          mounted:挂载完成            经常使用        都在这里面发送请求

  执行多次

      更新阶段

          beforeUpdate:更新之前

          updated:更新完成

  销毁阶段

      beforeDestroy:销毁之前      使用一般            在组件死亡之前,我们一般处理的事情,关闭定时器

      destroyed:销毁完毕

KeepAlive中

激活

        activated() {

           1.在首次挂载、

            2.以及每次从缓存中被重新插入的时候调用

            },

            失活

            deactivated() {

                1.在从 DOM 上移除、进入缓存

                2.以及组件卸载时调用

            }

            拓展: 激活钩子里面的定时器,需要在失活里面进行清除

       在Vue实例里面 $ 是给程序员使用的

new Vue({
        /* template: 模板 */
        // template:`<h1>你好!</h1>`,
        template: "#box",

        data() {
          return {
            msg: "hello world",
            count: 0,
          };
        },
        /* 创建组件之前 */
        beforeCreate() {
          /* 读取到this,但是读取不到data */
          console.log("beforeCreate", this, this.msg);
        },
        /* 创建组件完成 */
        created() {
          /* 读取this,可以读取到data */
          console.log("created", this, this.msg);
        },
        /* 挂载组件之前 */
        beforeMount() {
          //可以读取到Vue解析之前的DOM
          console.log(
            "beforeMount",
            this,
            this.msg,
            document.getElementById("app").innerHTML
          );
        },
        /* 挂载组件完成 */
        mounted() {
          //可以读取到Vue解析之后的DOM
          console.log(
            "mounted",
            this,
            this.msg,
            document.getElementById("app").innerHTML
          );
        },
        /* 组件更新之前 */
        beforeUpdate() {
          //不要在这里更新数据
          //可以读取到更新之前的数据
          console.log(
            "beforeUpdate",
            this,
            this.msg,
            document.getElementById("app").innerHTML
          );
        },
        /* 组件更新之前 */
        updated() {
          //不要在这里更新数据
          // this.count ++

          //可以读取到更新之后的数据
          console.log(
            "updated",
            this,
            this.msg,
            document.getElementById("app").innerHTML
          );
        },
        //销毁之前
        beforeDestroy() {
          console.log("beforeDestroy");
        },
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>