vue组件的生命周期钩子函数-CSDN博客

本文链接：https://blog.csdn.net/qq_42094345/article/details/128432774
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生命周期</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
  </head>
  <style>
    * {
      margin: 5px;
    }
  </style>
  <body>
    <div id="app">
      {{foo}}
      <hr />
      {{myname}}
      <button @click="myname = new Date">changeMyname2Date</button>
      <hr />
      <div>
        <ul>
          <li v-for="item in datalist" :key="item.id">
            <div>编码：{{item.id.replaceAll("-", "").substring(0, 6)}}</div>
            <div>姓名：{{item.name}}</div>
            <div>年龄：{{item.age}} 岁</div>
            <div>城市：{{item.city}}</div>
          </li>
        </ul>
      </div>
      <div>
        <timer v-if="iscreated"></timer>
      </div>
    </div>
  </body>
  <script>
    var bus = new Vue();
    Vue.component("timer", {
      template: `
            <div>
                <div>倒计时组件：</div>
                <div>{{countDown(time)}}</div>
            </div>
            `,
      data() {
        return {
          time: 60 * 60,
        };
      },
      methods: {
        countDown(dec) {
          //得到天 格式化成前缀加零的样式
          var d = parseInt(dec / 60 / 60 / 24);
          d = d < 10 ? "0" + d : d;
          //得到小时 格式化成前缀加零的样式
          var h = parseInt((dec / 60 / 60) % 24);
          h = h < 10 ? "0" + h : h;
          //得到分钟 格式化成前缀加零的样式
          var m = parseInt((dec / 60) % 60);
          m = m < 10 ? "0" + m : m;

          //得到秒 格式化成前缀加零的样式
          s = parseInt(dec % 60);
          s = s < 10 ? "0" + s : s;

          return `${d}天${h}时${m}分${s}秒`;
        },
      },
      mounted() {
        this.timerID = setInterval(() => {
          if (this.time < 1) {
            bus.$emit("iscreated", false);
          }
          console.log("倒计时：" + this.time + "秒");
          this.time--;
        }, 1000);
      },
      beforeDestroy() {
        // 清除定时器
        clearInterval(this.timerID);
        console.log("beforeDestroy", "timer组件销毁前");
      },
      destroyed() {
        console.log("destroyed", "timer组件已经销毁");
      },
    });

    var app = new Vue({
      el: "#app",
      data: {
        myname: "default-myname",
        iscreated: true,
        datalist: [],
      },
      methods: {},
      beforeCreate() {
        // 此方法只会走一次
        // 没用
        console.log("beforeCreate", this.myname);
      },
      created() {
        // 此方法只会走一次
        // 有用
        this.myname = "zhaopq";
        this.foo = "created中初始化的值 ";
        console.log(
          "created",
          "初始化状态或者挂载当前实例的一些属性",
          this.myname
        );
      },
      beforeMount() {
        // 此方法只会走一次
        // 没用
        console.log(
          "beforeMount",
          document.getElementById("app").innerHTML,
          this.$el
        );
      },
      mounted() {
        // 此方法只会走一次
        // 依赖dom创建之后，才能进行初始化工作的插件
        // 有用 订阅bus.$on
        // 发ajax请求
        console.log("mounted", document.getElementById("app").innerHTML);

        bus.$on("iscreated", (iscreated) => {
          this.iscreated = iscreated;
        });

        // 定义一个对象作为请求参数
        // var param = {
        //   name: "zhaopq",
        //   age: "18",
        //   city: "beijing",
        // };
        // axios.post("http://localhost:8080/list", param).then((res) => {
        //   this.datalist = res.data.data;
        // });
		this.$nextTick(() => {
		                console.log("比updated执行的晚，而且只执行一次")
		            })

      },
      beforeUpdate() {
        // 更新之前  每次更新之前走一遍 没啥大用
        console.log("beforeUpdate", "更新之前  每次更新之前走一遍");
      },
      updated() {
        // 更新之后 每次更新之后走一遍 有用
        console.log("updated", "更新之后 每次更新之后走一遍");
      },
      beforeDestroy() {
        // 组件销毁之前
      },
      destroyed() {
        // 组件销毁之后
      },
    });
  </script>
</html>