乐趣区

关于vue.js:详解Vue八大生命周期钩子函数

jiezi

摘要：Vue 为生命周期中的每个状态都设置了钩子函数 (监听函数)。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

本文分享自华为云社区《一文带你弄懂 Vue 八大生命周期钩子函数》，原文作者：北极光之夜。。

一. 速识概念：

咱们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会主动执行的函数。

依照官网的原话，就是每个 Vue 实例在被创立时都要通过一系列的初始化过程——例如，须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变动时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段增加本人的代码的机会。

简略来说就是每个 Vue 实例在被创立时都要通过一系列的初始化过程：创立实例，装载模板，渲染模板等。Vue 为生命周期中的每个状态都设置了钩子函数 (监听函数)。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

二. 八大生命周期钩子函数：

上面是官网文档里的生命周期图，英语好的同学能够看看：在这里插入图片形容

三. 联合代码理解：

先看案例根本代码如下，前面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。留神 show 函数的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{information}}
    </div>
    <script type="text/javascript">
       // 创立 vue 实例
       var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'}
       })
       // 各个生命周期函数通过调用上面这个函数理解其所处的生命阶段
       function show(inf,obj){console.log(inf);
          console.log("------------------------------------------");
          console.log('获取 vue 实例 data 里的数据:');
          console.log(obj.information);
          console.log("------------------------------------------");
          console.log('挂载的对象，就是 DOM：');
          console.log(obj.$el);
          console.log("------------------------------------------");
          console.log('页面上曾经挂载的 DOM：');
          console.log(document.getElementById('app').innerHTML);
       }

    </script>

1. beforeCreate：

这个阶段 vue 实例刚刚在内存中创立，此时 data 和 methods 这些都没初始化好。在案例中增加 beforeCreate 钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
           beforeCreate: function(){
             // 传入该阶段简介与 this，this 就是该阶段的 vue 实例
                  show('vue 实例初始化之前',this);
           }
       })

看运行后果：

能够看到，此时 vue 实例刚刚在内存中创立，其它什么都 undefined。

2.created：

这个阶段 vue 实例在内存中曾经创立好了，data 和 methods 也可能获取到了，然而模板还没编译。在案例中增加 created 钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
           created: function(){show('vue 实例初始化之后',this);
           }
       })

看后果：

看到没，曾经晓得 data 里的数据了。其它的话都没。

3.beforeMount：

这个阶段实现了模板的编译，然而还没挂载到页面上。在案例中增加钩子函数：

var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
           beforeMount: function(){show('挂载之前',this);
           }
       })

看后果：

看到没，要挂载的对象都编译好了，然而页面的 DOM 树还没挂上去，这个阶段页面还没能显示进去。

4.mounted：

这个阶段，模板编译好了，也挂载到页面中了，页面也能够显示了。在案例中增加钩子函数：

var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
           mounted: function(){show('挂载之后',this);
           }
       })

看后果：

5.beforeUpdate:

转态更新之前执行此函数，此时 data 中数据的状态值曾经更新为最新的，然而页面上显示的数据还是最原始的，还没有从新开始渲染 DOM 树。

先扭转 data 里数据：

vm.information = '南极光之夜';
在案例中增加钩子函数：

var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
          beforeUpdate: function(){show('更新之前',this);
           }
       })

看后果：

看到没，vue 实例里的数据曾经变成了南极光之夜。然而此阶段页面 DOM 节点上显示的还是初始的数据北极光之夜。

6.updated：

这个阶段是转态更新实现后执行此函数，此时 data 中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM 节点曾经被从新渲染了。在案例中增加钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
          updated: function(){show('更新之后',this);
           }
       })

看运行后果：

更新了，全都更新了~

7.beforeDestroy：

beforeDestroy 阶段处于 vue 实例被销毁之前，当然，这个阶段 vue 实例还能用。

销毁 Vue 实例：

vm.$destroy();
在案例中增加钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
          beforeDestroy: function() {show('销毁之前',this);
          }
       })

看成果：

8.destroyed：

这个阶段在 vue 实例销毁后调用，此时所有实例批示的所有货色都会解除绑定，事件监听器也都移除，子实例也被销毁。

在案例中增加钩子函数：

var vm = new Vue({
           el: '#app',
           data: {information: '北极光之夜。'},
          destroyed: function() {show('销毁之后',this);
          }
       })

看后果：

点击关注，第一工夫理解华为云陈腐技术~

退出移动版