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>