Vue.js的生命周期(钩子函数)

旧城等待， 2022-12-20 08:51 235阅读 0赞

### Vue的生命周期 ###

*  生命周期简介
 *   *  生命周期图示
     *   *  生命周期图解
     *  Vue创建阶段
     *   *  beforeCreate
         *  created
         *  beforeMount
         *  mounted
     *  Vue运行阶段
     *   *  beforeUpdate
         *  updated
     *  Vue销毁阶段
     *   *  beforeDestroy
         *  destroyed

# 生命周期简介 #

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

## 生命周期图示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

### 生命周期图解 ###

new Vue() \----> 表示开始创建一个vue实例对象

Init Events & Lifecycle \----> 表示刚刚初始化了一个vue空的实例对象，此时，这个实例对象里面只有默认的生命周期函数和事件，其他的元素都未被创建

beforeCreated \----> 在此生命周期函数执行的时候，data和methods中的数据还未初始化

created \----> 在此函数中，data和methods都已被初始化，如果需要操作data中的数据或者调用methods中的方法，只能在created函数中进行

Has ‘el’ option? —— Created vm.$el and replace ‘el’ with it \----> 表示vue开始编辑模板、执行指令，最终在内存中生成一个编译好的最终的模板字符串，然后将模板字符串渲染到内存中的DOM中去，此时，只是在内存中渲染好模板，并没有把模板挂载到页面中去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

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

beforeMount \----> 该函数执行的时候，模板已经在内存中编译出来了，但是还未挂载到页面中去，页面中还是旧数据

Created vm.$el and replace ‘el’ with it \----> 将内存中编译好的模板，替换到浏览器的页面中去

beforeUpdated \----> 当执行此函数时，页面中的数据还是旧的，此时data中的数据是最新的，页面尚未和最新的数据保持同步

updated \----> 表示data中的数据可以更新到页面中去，页面中也是最新的数据

beforeDestroy \----> 当执行此函数时，vue实例已经从运行阶段进入到销毁阶段。此时，实例身上的所有data、methods、过滤器以及指令等都处于可用状态，销毁操作还没有真正的执行

destroyed \----> 生命周期的最后销毁阶段的钩子函数，它不是通过手动销毁的,而是通过vue实例自行销毁

Vue整个的生命周期中有很多钩子函数提供给我们在不同的时期进行操作，Vue提供给我们8个钩子函数：

*  **beforeCreate**
 *  **created**
 *  **beforeMount**
 *  **mounted**
 *  **beforeUpdated**
 *  **updated**
 *  **beforeDestroy**
 *  **destroyed**

下面一一介绍这些钩子函数

## Vue创建阶段 ##

### beforeCreate ###

生命周期中的第一个钩子函数，表示完全被创建出来之前，会执行它

可以通过例子来说明它：

<div id="app">
        <h1 id="h1">{
       {msg}}</h1>
    </div>
    <script> // 创建vue实例 得到ViewModel var vm=new Vue({ el:'#app', data:{ msg:'ok' }, methods: { show(){ console.log('执行了show方法'); } }, beforeCreate() { console.log(this.msg); this.show(); }, }) </script>

![在这里插入图片描述][20201111174913499.png_pic_center]

我们可以看到，在beforeCreate函数中输出data，输出结果是`undefined`，调用show方法会报错，就可以说明在函数执行的时候data和methods中的数据还未初始化

### created ###

生命周期中的第二个钩子函数，表示data和methods中的数据已经被初始化了

created() { 
       console.log(this.msg);
       this.show();
    }

![在这里插入图片描述][20201111175232998.png_pic_center]  
可以发现，在created函数中调用data和methods中的数据是完全ok的(只能在created函数中调用)，那就说明此时data和methods中的数据已经被初始化好了

### beforeMount ###

生命周期的第三个钩子函数，表示模板字符串已经在内存编译好了, 但是尚未挂载到页面中,页面依旧是原先的数据

beforeMount() { 
        console.log(document.getElementById('h1').innerText);
    }

![在这里插入图片描述][20201111175651714.png_pic_center]  
我们可以看到，它并没有把我们渲染好的数据挂载到页面中去，所以输出`{ {msg}}`

### mounted ###

生命周期中的第四个钩子函数，表示已经将内存中渲染好的模板挂载到页面中了

mounted() { 
        console.log(document.getElementById('h1').innerText);
    
        // 注意: mounted 是实例创建期间 的最后一个生命周期函数, 当执行 mounted就表示,
        // 该实例 已经被完全创建好了, 此时, 如果没有其他操作的话, 这个实例 就静静的 躺在我们的内存中, 一动不动
    }

![在这里插入图片描述][20201111180007456.png_pic_center]  
可以发现，此函数可以把msg的数据渲染到页面中去了

**注意事项：**  
mounted 是实例创建期间的最后一个生命周期函数, 当执行 mounted就表示该实例已经被完全创建好了,  
此时, 如果没有其他操作的话, 这个实例就静静的 躺在我们的内存中一动不动~~

## Vue运行阶段 ##

### beforeUpdate ###

生命周期的第五个钩子函数，表示data中数据是最新的, 而页面中依旧是原先的数据

beforeUpdate() { 
        console.log('界面上元素的内容:'+document.getElementById('h1').innerText); 
        console.log('data中的msg数据是:'+this.msg);  
    }

![在这里插入图片描述][20201111185627261.png_pic_center]  
此时，msg中原本的数据是ok，添加事件将msg的数据改为NO，所以`this.data`出来的msg为NO，但是界面上通过`document.getElementById`获取出来的数据还是ok

### updated ###

生命周期的第六个钩子函数，表示data中的数据此时可以更新到页面中去，页面上是最新的数据

Update() { 
        console.log('界面上元素的内容:'+document.getElementById('h1').innerText); // no
        console.log('data中的msg数据是:'+this.msg);  // no
    }

![在这里插入图片描述][20201111195407146.png_pic_center]  
此时，`this.data`出来的msg为NO，界面上通过`document.getElementById`获取出来的数据也是NO

## Vue销毁阶段 ##

### beforeDestroy ###

生命周期的第七个钩子函数，当执行此函数时，vue实例已经从运行阶段进入到销毁阶段。此时，实例身上的所有data、methods、过滤器以及指令等都处于可用状态，销毁操作还没有真正的执行。

### destroyed ###

生命周期的最后销毁阶段的钩子函数，它不是通过手动销毁的,而是通过vue实例自行销毁。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3cf642e085dc4e2f9aec9bd0fa86aa9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/0fe39ab87ee945ff9882d28159e6247e.png
[20201111174913499.png_pic_center]: https://img-blog.csdnimg.cn/20201111174913499.png#pic_center
[20201111175232998.png_pic_center]: https://img-blog.csdnimg.cn/20201111175232998.png#pic_center
[20201111175651714.png_pic_center]: https://img-blog.csdnimg.cn/20201111175651714.png#pic_center
[20201111180007456.png_pic_center]: https://img-blog.csdnimg.cn/20201111180007456.png#pic_center
[20201111185627261.png_pic_center]: https://img-blog.csdnimg.cn/20201111185627261.png#pic_center
[20201111195407146.png_pic_center]: https://img-blog.csdnimg.cn/20201111195407146.png#pic_center