Vue实例的生命周期_两个重要的钩子

饮水思源:

https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=49&spm_id_from=pageDriver

引入生命周期——一个渐变特效

Vue实例的生命周期_两个重要的钩子

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <h1>一个渐变特效&VUE的生命周期</h1>
  <div id="root">
    <h2 :style="{opacity}">一个渐变的文字</h2>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        opacity: 0.5
      },
      mounted() {
        console.log("mount是挂载的意思,mounted是挂载完毕,也就是dom被放入页面后");        
        setInterval(() => {
          this.opacity -= 0.01;
          if (this.opacity <= 0) this.opacity = 1;
        }, 20)
      },
    });
  </script>
</body>
</html>

两个重要的钩子——mounted和beforeDestroy

单纯stop,组件确实不再更新,但是计时器没有关掉,也就是“setInterval没被干掉”还会不断输出:

  <script>
    new Vue({
      el: "#root",
      data: {
        opacity: 0.5,
      },
      methods: {
        stop() {
          this.$destroy();
        }
      },
      mounted() {     
        this.tid = setInterval(() => {
          console.log("setInterval没被干掉")
          this.opacity -= 0.01;
          if (this.opacity <= 0) this.opacity = 1;
        }, 20)
      },
    });
  </script>

正确的写法,在销毁之前还需要处理后事,并且这个逻辑应该写在自己身上:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <h1>一个渐变特效&VUE的生命周期</h1>
  <div id="root">
    <h2 :style="{opacity}">一个渐变的文字</h2>
    <button v-on:click="stop">点我停止渐变</button>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        opacity: 0.5,
      },
      methods: {
        stop() {
          this.$destroy();
        }
      },
      mounted() {     
        this.tid = setInterval(() => {
          console.log("setInterval没被干掉")
          this.opacity -= 0.01;
          if (this.opacity <= 0) this.opacity = 1;
        }, 20)
      },
      beforeDestroy() {
        clearInterval(this.tid)
      },
    });
  </script>
</body>
</html>

 

上一篇:产业数字化转型“李洋十二条”的背后究竟在用什么样的系统动力学?


下一篇:vue在mounted中获取元素宽度不准确的问题