Vue2.x之生命周期详解

左手的ㄟ右手 2022-04-04 10:08 230阅读 0赞

**目录直通车**

一、 分三步流程解读

1、初始化显示

2、更新状态

3、销毁Vue实例

二、 常用的生命周期方法

三、 完整流程解读

实例代码

完整生命周期实例

--------------------

**生命周期也叫钩子。**

我在官网找了一张图，千万不要觉得这张图好复杂就不去认真的分析了，反而去看别人写的博客，反而越整越懵。

就下面这张图，为大家详解生命周期，然后贴出实例代码。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70][]

生命周期说白了就是一套流程，而这套流程里面的方法就会有先后顺序的执行（调用了就执行，不调用就不会执行），整个流程分为三个步骤。

请看下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1][]

# 一、 分三步流程解读 #

## 1、初始化显示 ##

new Vue() 表示创建一个Vue实例，这里假设vm是新建的实例。

按照图上的流程是：beforeCreate() ➡ created() ➡ beforeMount() ➡ mounted()

## 2、更新状态 ##

beforeUpdate() ➡ updated()

## 3、销毁Vue实例 ##

vm.$destory()

beforeDestory() ➡ destoryed()

beforeDestory(): 做收尾工作（就是在结束之前做一些事情，如: 清除定时器）。

# 二、 常用的生命周期方法 #

mounted，初始化之后就会立即调用。

created()/mounted()：发送ajax请求, 启动定时器等异步任务。

# 三、 完整流程解读 #

**① created表示已经创建结束了（过去式嘛），再创建完成之前会做一些准备工作（比如说，监视数据，数据到最后都会实现数据绑定的，会用到set用于监视数据的变化），在做准备工作之前会先调用beforeCreate()。**

**② created之后会判断是否存在“el”的配置，这里会涉及到一个自动挂载页面和手动挂载页面的概念，如果有el的话会自动挂载，指定了el之后，就指定了Vue管理的一片区域，假设没有指定区域的话，那vue为谁服务呢？当然谁都不服务了。所以另外一种方式，就需要手动调用 vm.$mount(el) 指定一片区域，基本上是不会这么做的。**

**③ 接着执行到判断我们是否有 “template”这个配置，如果没有就直接编译 el 这篇区域的HTML代码作为模板。要注意Vue转换成的HTML代码是没有直接挂载到页面上去的，它在内存里编译好了以后，才会全部挂载到页面上显示。在挂载之前，就有beforeMount()这个函数，挂载完成之后调用Mounted()。**

**④ 下面来到“更新”的一部分，挂载数据之后在页面更新之前会调用beforeUpdate()，页面发生变化之后会调用Updated()。**

**⑤ 最后执行到“死亡” ，当调用vm.$destory()的时候，所有的组件都会移除，在移除之前会调用beforeDestory() 来做一些收尾的工作，比如说前面也提到了清除定时器，死亡之后再调用destory()。**

### 实例代码 ###

打开浏览器的开发者然后调试工具分析代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>生命周期</title>
    </head>
    <body>
    
    <div id="test">
      <button @click="destroyVue">destory Vue</button>
      <p v-if="isShow">Hello,World</p>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#test',
        data: {
          isShow: true
        },
    
        mounted () {
          // 执行异步任务
          this.intervalId = setInterval(() => {
            console.log('-----')
            this.isShow = !this.isShow
          }, 1000)
        },
    
        beforeDestroy() {
          console.log('beforeDestroy()')
          // 执行收尾的工作
          clearInterval(this.intervalId)
        },
    
        methods: {
          destroyVue () {
            this.$destroy()
          }
        }
      })
    
    </script>
    </body>
    </html>

### 完整生命周期实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>生命周期</title>
    </head>
    <body>
    
    <div id="test">
      <button @click="destroyVue">destory vue</button>
      <p v-if="isShow">Hello,world!</p>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#test',
        data: {
          isShow: true
        },
    
        beforeCreate() {
          console.log('beforeCreate()')
        },
    
        created() {
          console.log('created()')
        },
    
        beforeMount() {
          console.log('beforeMount()')
        },
    
        mounted () {
          console.log('mounted()')
          // 执行异步任务
          this.intervalId = setInterval(() => {
            console.log('-----')
            this.isShow = !this.isShow
          }, 1000)
        },
    
    
        beforeUpdate() {
          console.log('beforeUpdate()')
        },
        updated () {
          console.log('updated()')
        },
    
    
        beforeDestroy() {
          console.log('beforeDestroy()')
          // 执行收尾的工作
          clearInterval(this.intervalId)
        },
    
        destroyed() {
          console.log('destroyed()')
        },
    
        methods: {
          destroyVue () {
            this.$destroy()
          }
        }
      })
    
    
    </script>
    </body>
    </html>

生命周期的原理的话，经得起折腾的朋友去了解一下吧~

如果您在阅读的过程中遇到了问题，欢迎评论留言告诉我。

最后，感谢您的阅读！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70]: /images/20220404/708c8751eecf41409b5e0ee34c58f023.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1]: /images/20220404/5f36f5f4652246b6a0cd29daaeec03fe.png