在线详解Vue生命周期

酉时Coding课堂 2021-11-27

777

前端小伙伴在面试或者工作中往往会遇到Vue的生命周期这块的知识点，面试会问，工作时善用生命周期函数可以编写高质量的代码，所以本篇带大家看一下Vue中的生命周期函数，或者叫钩子函数，来看看都有哪些并且什么时候执行以及应用场景

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created
函数在开发中经常用到的，它可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

也有一些其它的钩子，在实例生命周期的不同阶段被调用：如 mounted
、updated
和 destroyed
。生命周期钩子的 this 上下文指向调用它的 Vue 实例

生命周期图示：

生命周期大致分为三个阶段 初始化阶段 、 更新阶段 、 死亡阶段

初始化阶段：

该阶段在new Vue 实例时调用，并且只调用一次

beforeCreate：Vue实例创建之前调用函数

created：Vue实例创建之后调用函数

之后进行挂载和模板渲染

beforeMount：挂载前操作，去替换el选中的标签，也就是渲染标签

Mounted：挂载完成，数据显示在浏览器上，完成标签中的数据渲染，显示出真实的数据

更新阶段：

当数据发生变化时进入该阶段，该阶段会 频繁调用

beforeUpdate：当数据发生修改时触发

updated：虚拟DOM发生修改后，也就是数据修改后调用，之后参考上图，会重新对数据进行挂载，完成数据渲染。

死亡阶段：

死亡阶段也只调用一次

beforeDestroy：销毁之前运行

destroyed：销毁之后运行

对应演示代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    
  </head>
  <body>
    <div id="app">
      <p v-show="isShow">{{message}}</p>
      <p>{{isShow}}</p>
      <button type="button" @click="destroyVM">取消布灵布灵</button>
    </div>
  </body>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        message: "若隐若现",
        isShow: true
      },
      
      beforeCreate() {
        console.log("beforeCreate");
      },
      
      created() {
        console.log("create");
      },
      
      beforeMount() {
        console.log("beforeMount");
      },
      
      mounted() {
        console.log("mounted");
        // 创建定时器
        this.intervald = setInterval(()=>{
          console.log("-------"+this.isShow);
          this.isShow = !this.isShow;
        },1000)
      },
      
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      
      updated() {
        console.log("updated");
      },
      
      beforeDestroy() {
        console.log("beforeDestroy");
                // 清除定时器
        clearInterval(this.intervald)
      },
      
      destroyed() {
        console.log("destroyed");
      },
      
      methods: {
        // 干掉vm
        destroyVM() {
          // 调用销毁函数
          this.$destroy()
        }
      }
    })
</script>
</html>

运行结果如下：

执行顺序：

在页面刷新时依次调用 beforeCreate、created、beforeMount、mounted，定时器运行修改isShow数据时多次调用 beforeUpdate、updated，点击按钮调用注销函数，调用beforeDestroy、destroyed

总的来说created、mounted、beforeDestroy较为常用

created、mounted：发送ajax请求，启动定时器等异步任务
beforeDestroy：做收尾工作，如：清除定时器

喜欢就点个在看再走吧

数据库

文章转载自酉时Coding课堂，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

在线详解Vue生命周期

评论