带你全面认识vue的生命周期。

一事
1,184 阅读4分钟

无论我们在学习vue中，还是面试当中。vue的生命周期都是我们必须要清楚的。这样更有利你学习vue的使用。通过简单一张图，带你全面认识vue的生命周期。

Vue的生命周期是生命呢？

举个例子：每个人从出生到死亡，这一段时间可以称作是我们的生命。以张三举例。例如：张三从2022年5月23日出生。那么，今天无疑是他一个重要的日子（生日），等到张三结婚，那么无疑也是一个重要时间。等到张三死亡。那么那一天也是他的重要日子。总结：vue的生命周期，就是Vue从出生到死亡的一些重要的时间，我们将Vue的这些重要时间，称作Vue的生命周期函数，也叫Vue的钩子函数。

Vue生命周期一共分为四个阶段：

  • 初始化  =>   创建组件    =>  beforeCreate   created

  • 挂载   =>  渲染显示组件  =>    beforeMount   mouted

  • 更新   =>  修改了变量  =>   触发视图刷新   =>  beforeUpdate   updated

  • 销毁   =>  切换页面   =>  会把组件对象从内存删除   => beforeDestory  destoryed

如下图官方文档中所展示的生命周期图

生命周期.png

我们拆成四个阶段来看这张图。

1.创建阶段

image.png

第一个生命周期函数 beforeCreate： 创建前，这时候只是初始化了vue的生命周期，事件。vue的data对象数据，和方法以及一些计算属性全部都还没开始。写了一段代码进行验证。此时vm实例并没有_data属性

 beforeCreate() {
        console.log('beforeCreate');
        console.log(this);  // 这时候的this没有_data属性
        debugger
      },

image.png

第二个生命周期函数 created ：创建后，还是msg来验证，现在这个阶段created是可以访问data中定义的值，因为实例已经初始化完成了有值了，所以可以拿到。 再着，created可以发送ajax请求。

 created() {
        console.log('created');
        console.log(this);
        debugger
  },

image.png

第二阶段

image.png

这个阶段Vue开始解析模板，生成虚拟DOM，但是不能在页面中显示已经解析好了的内容，存储在内存当中。并查看Vue中是否有“el”若没有“el”到这里就直接结束了，后面的代码不执行。显示的代码也是没有经过解析的。当再次调用vm.$mount……页面就会重新解析，再执行代码。

第三阶段

image.png

第三个生命周期函数 beforeMount：挂载前： 在挂载开始之前就进行调用，此时还是虚拟DOM，还未真实的展现在页面中，所以此阶段是不能对DOM进行操作的。操作也不会奏效。

  beforeMount() {
        console.log('beforeMount');
        console.log(this);
        document.querySelector('h2').innerText = '我改了h2'
        debugger   // 只有在debugger 时候才能看到我改了h2，等到debugger过后，h2内容将被虚拟DOM覆盖。
      },

第四个生命周期函数 mounted： 挂载后：“el”被vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root 实例挂载了一个文档内元素，当mounted被调用是 vm.$el 也在文档内，此时也是可以对DOM进行操作的。

 mounted() {
        console.log('beforeMount');
        console.log(this.$el);
        document.querySelector('h2').innerText = '我也改'
      },
此时，页面的h2内容变成我也改

第四阶段

image.png

第五个生命周期函数 beforeUpdate：更新前：数据更新时调用，发生在虚拟DOM打补丁之前，这里适合更新之前访问现有的DOM，比如手动移除已添加的时间监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行 。

第六个生命周期函数 updated：更新后：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 只会在数据变更之后触发这个钩子函数。

<body>
  <div id="app">
    <h1>当前n的值：{{n}}</h1>
    <h2>哈哈哈哈哈</h2>
    <button @click="add">点我n+</button>
    <button @click="destroy">点我销毁</button>
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#app',
      data: {
        name: 'Vue.js123',
        n: 1
      },
      methods: {
        add() {
          this.n++
        },
        destroy() {
          this.$destroy()
        }
      },
      beforeCreate() {
        console.log('beforeCreate');
        console.log(this);  // 这时候的this没有_data属性
        // debugger
      },
      created() {
        console.log('created');
        console.log(this);
        // debugger
      },
      beforeMount() {
        console.log('beforeMount');
        console.log(this);
        document.querySelector('h2').innerText = '我改了h2'
        debugger
      },
      mounted() {
        console.log('beforeMount');
        console.log(this.$el);
        document.querySelector('h2').innerText = '我也改'
      },
      beforeUpdate() {
        console.log('beforeMount');
        console.log(this.n);
        // debugger
      },
      updated() {
        console.log('updated');
        console.log(this.n);
        // debugger
      },

当我们点击n++按钮修改n的中，我们就会进入beforeUpdate函数，updated函数。

image.png

第五阶段

image.png

第七个生命周期函数 beforeDestroy：销毁前：实例销毁之前调用。在这一步，实例任然完全可用。该钩子在服务器端渲染期间不被调用。所以，一般在此阶段: 关闭定时器,取消订阅消息,解绑自定义事件等收尾操作。

第八个生命周期函数：销毁后：Vue实例销毁后调用。调用后，Vue实例指示的所有东西，都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

总结： 常用的生命周期钩子：

1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1. .销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

avatar
文章
阅读
粉丝