vue---组件生命周期钩子函数（共11个，此处举例八个）

最新推荐文章于 2022-03-07 22:02:59 发布

咩有猫腻.

最新推荐文章于 2022-03-07 22:02:59 发布

阅读量735

点赞数

分类专栏：三-框架类 Vue

本文链接：https://blog.csdn.net/DcTbnk/article/details/107245283

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

vue生命周期图示详情链接

在这里插入图片描述
组件生命周期钩子函数有十一个，暂时学了八个，其中有六个是执行一次的，有两个是循环执行的
如果在更新阶段，改变了data，会触发什么样的结果：内存溢出，死循环

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue组件生命周期</title>
    <style>
      .ball {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: orangered;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 @click="count++">计数值为:{{count}}</h1>
      <ball v-if="isShow"></ball>
      <button @click="isShow=!isShow">toggle</button>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      var ball = {
        template: '<div class="ball"></div>',
        beforeDestroy() {
          console.log("组件销毁之前");
        },
        destroyed() {
          console.log("组件销毁完成");
        },
      };
      new Vue({
        el: "#app",
        data: {
          count: 1,
          isShow: true,
        },
        components: {
          ball,
        },
        beforeCreate() {
          console.log("组件创建之前");
        },
        created() {
          console.log("组件创建完成");
        },
        beforeMount() {
          console.log("组件挂载之前");
        },
        mounted() {
          console.log("组件挂载完成");
          // this.$el可以获取当前组件中的dom元素
          // console.log(this.$el);
          // this.$el.querySelector("h1").style.color = "red";
        },
        beforeUpdate() {
          console.log("组件更新之前");
        },
        updated() {
          console.log("组件更新完成");
          // this.count++;  死循环
        },
        beforeDestroy() {
          console.log("组件销毁之前");
        },
        destroyed() {
          console.log("组件销毁完成");
        },
      });
    </script>
  </body>
</html>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue---组件生命周期钩子函数（共11个，此处举例八个）

vue生命周期图示详情链接组件生命周期钩子函数有十一个，暂时学了八个，其中有六个是执行一次的，有两个是循环执行的如果在更新阶段，改变了data，会触发什么样的结果：内存溢出，死循环<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫

专栏目录