前端---【Vue2基础更新:一文看懂生命周期】

今天也在码前端–霖

已于 2023-07-14 20:16:47 修改

阅读量209

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-05-30 20:08:32 首次发布

本文链接：https://blog.csdn.net/m0_61307468/article/details/130941781

版权

Vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文章详细阐述了Vue实例的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等关键阶段，并通过代码示例展示了如何在这些生命周期钩子中编写自定义代码。Vue的生命周期涉及到数据响应式、模板编译和DOM操作，对于理解和优化Vue应用至关重要。

摘要由CSDN通过智能技术生成

一. 生命周期

1.1 何为生命周期

Vue 实例在其生命周期中会经过一系列的初始化过程、更新、销毁等状态。这些状态的改变,会触发 Vue 生命周期中的事件。我们可以在这些事件中,执行一些自定义的代码。

生命周期数，又称：生命周期函数、生命周期钩子。
是什么? —— Vue在关键时刻帮我们调用的一些特殊名称的函数

1.2生命周期包括

Vue 的生命周期 hooks 主要包括:

创建期间的:beforeCreate: 实例刚被创建,注入事件与生命周期选项之前执行。created: 实例创建完成后执行,此时 data 与 methods 已经绑定,但 DOM 还未渲染,$el 属性还不存，beforeMount: 模板编译/挂载之前执行。 mounted: 实例挂载完成,DOM已渲染,$el 属性可以访问到。
更新之前期间的:beforeUpdate: 数据更新时,虚拟 DOM 重新渲染和打补丁之前执行。 updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成后执行。
销毁期间的:beforeDestroy: 实例销毁之前执行。 destroyed: Vue 实例销毁后执行。

1.3图解生命周期

这个Vue官网的生命周期图，添加了一些意思的解释

1.3.1个人详解生命周期图

我们学习Vue主要是记忆带两个红框的内容：beforeCreate 、created、beforeMount、mounted、beforeUpdate、beforeDestory、destroyed.这些调用钩子的地方，是我们需要写代码的地方。

生命周期过程，首先是创建的一个new vue实例，然后对事件或者生命周期进行初始化。然后给VM注入数据或者，完成响应式的数据代理或者数据劫持。当VM注入完成的时候，此时，数据代理或者数据劫持就已经创建完毕，然后我们的VM就可以访问到data的数据。

当创建完成之后，然后开始寻找可以解析的模板，如果有解析模板这个选项，放在渲染的函数里面，就开始翻译模板；如果没有解析的模板选项，我们就继续翻译el的outerHTML的属性，作为模板解析插值语法、虚拟DOM。此时，将内存虚拟的DOM转为真实的DOM插入到页面，然后进行挂载。挂载完成之后，我们就可以看到，经过vue编译的DOM开始在页面呈现数据。此时挂载已经完成。

虚拟的DOM再次渲染和比较，此时完成了数据驱动视图的更新。然后就是到了收尾的阶段，收尾阶段此时，vm所有的data、methods都是可以用的，在毁灭之前，此阶段关闭定时器、取消订阅消息、解绑自定义事件。在这些完全之后，就是直接销毁，此阶段销毁之前所调用的钩子，销毁组件，销毁事件监听。整个生命周期就是完成了。

贴一段个人测试生命周期的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>当前的n值是：{{n}}</h2>
      <button @click="add" id="btn">点我n+1</button>  
      <button @click="goDie">我要去死</button>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        /* template:`
          <div>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="add" id="btn">点我n+1</button>  
          </div>
        `, */
        data:{
          n:1
        },
        methods:{
          add(){
            console.log('add被调用了')
            this.n += 1
          },
          goDie(){
            console.log('goDie被调用了')
            this.$destroy()
          }
        },
        watch:{
          n(val){
            console.log('n变化了',val)
          }
        },
        //数据代理、数据劫持 创建之前
        beforeCreate(){
          console.log('beforeCreate',this)
          // debugger;
          this.__proto__.a = 9
        },
        //数据代理、数据劫持 创建完毕
        created(){
          console.log('created',this)
          // debugger;
        },
        // 挂载之前
        beforeMount(){
          // 此时的$el还是没有解析的模板
          console.log('beforeMount',this.$el)
          // 下面这行代码对DOM的操作，最终都不奏效
          // document.getElementById('btn').innerText = '0202'
          // debugger;
        },
        // 挂载完毕（常用）
        mounted(){
          // 此时的$el是模板经过解析之后的内容
          console.log('mounted',this.$el)
          // debugger;
        },
        // 页面更新之前
        beforeUpdate(){
          console.log('beforeUpdate',this.n)
          // debugger;
        },
        // 页面更新完毕
        updated(){
          console.log('updated',this.n)
        },
        // 销毁之前（即将死亡，还没死）
        beforeDestroy(){
          console.log('beforeDestroy')
          console.log(this.n)
        },
        
      })
    </script>
  </body>
</html>