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>