您的位置: 首页  >  文章  >  Vue的生命周期及钩子函数详解

Vue的生命周期及钩子函数详解

分类: 文章 • 2023-10-25 19:45:59

Vue的生命周期及钩子函数详解

想要直观的了解Vue的生命周期及钩子函数，离不开一张图：Vue实例的“生命周期图”。

大家可以去官网查看或者保存下来这张生命周期图示。

官网地址：Vue官网生命周期图示

我们接下来的讲解，将依据这张图来进行。

生命周期图示解释：

  • 图上绿色的框是一个一个的步骤。
  • 红色的圆角框就是Vue的钩子函数。
  • 黄色的菱形框就是判断。

Vue的生命周期指的是什么？

 ​ ​Vue的生命周期通俗来讲就是我们用Vue写的网页在浏览器运行起来之后，我们写的代码要在内存里执行。例如我们都会写的var vm = new Vue();，就是new出来了一个Vue 实例。这个实例从创建一直到我们关掉浏览器这个实例消亡，这一段时间里，Vue这个框架干了啥，Vue的实例做了啥，先做啥，后做啥，这一系列事情的关系是怎样的，这就是Vue的生命周期。

Vue的生命周期分三个阶段：创建阶段，运行阶段，销毁阶段。

在图中，我对生命周期各个部分进行了标注并做了一些必要的解释。

Vue的生命周期及钩子函数详解

流程解释（12步对应图中操作）：

  1. 生成一个Vue实例，执行钩子函数beforeCreate()。【实例创建前】
  2. 对实例进行初始化。
  3. 把实例成员挂载到view model身上,执行钩子函数created()。【实例创建后】
  4. 判断有无el对象【el对象用来指明我们控制的视图是那一区域】。
  5. 如果有el对象，判断是否使用了模板。
  6. 如果使用了模板，则按照编译模板的方法去做，如果没有则把el控制的视图区域当做模板来渲染。执行钩子函数beforeMount()。【实例挂载前】

解释一下beforeMount()时都干了什么：

  我们都知道，页面在加载时，会在内存里生成一个我们页面的DOM树，beforeMount时就会通过el对象找到我们要控制的视图区域，然后把视图区域的那个DOM节点及其子节点整体的复制到一份新开辟出来的内存空间中，我们接下来对视图的所有操作都会在这个虚拟空间中进行，在操作完毕之后，Vue就会执行下一步。

  1. 把经过更改的新的el视图区域，替换掉原来的el视图区域。执行钩子函数Mounted()【实例挂载后】。

  2. 进入运行阶段，运行阶段就是进行一些操作了，执行钩子函数beforeUpdate()。【数据更新前】

  3. 操作完毕之后，把这些数据渲染到页面上，执行钩子函数updated()。【数据更新后】

    运行阶段是个圆，说明运行阶段可能执行0次，也可能是执行n次的。

      比如：我要是只看看页面就完事，那运行阶段一次都不执行，但是如果说我要在在页面上添加数据，不能说填加完一条数据，运行阶段执行一遍之后就进入实例的销毁阶段了，这个显然是不合理的。

  4. 进入销毁阶段，执行钩子函数beforeDestroy()【实例销毁前】

  5. 进行销毁，拆卸监视器、子组件和事件侦听器。

  6. 销毁完成，执行钩子函数destroyed()。【实例销毁后】

  • 生命周期中的钩子函数是Vue在它生命周期中必须要执行到的事件，这些事件其实就是函数。
  • 当然这些事件是允许我们程序员来编写代码的，以此当Vue的生命周期走到这里时，来进行我们想要的操作。
  • 一个实例在创建阶段和销毁阶段的六个钩子函数是永远执行一次的。执行过去了，就不会再次执行了。

在图中我提到：在Vue的生命周期执行完init Events之后我们才能访问我们定义的实例成员，并且这个点也是最早可以访问到实例成员的点，为了验证这个，我们看一段代码。

<body>
    <div id="app"></div>
    //这里的路径为本机上的vue.js路径
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : '我是初始值'
            },
            methods : {
                show : function(){
                    console.log(this.msg);
                }
            },
            beforeCreate(){
                console.log(this.msg);
            },
            created(){
                console.log(this.msg);
            }
        });
    </script>
</body>

运行结果截图：

Vue的生命周期及钩子函数详解

可以看到在beforeCreate()的时候，我们输出的是undefined，而在 created()后就输出了msg的值。

这说明在Vue的实例成员是在created之后，才挂载到了我们的vm身上,所以在created之后再访问就能访问到我们的实例成员了。

生命周期的作用：

简单来说，了解了Vue的生命周期，我们就知道了在实例进行到某个阶段，我们可以做些什么，或者说我们的这个操作要在Vue的那个阶段，那个位置执行才合适，这对我们写Vue的代码很有帮助。

相关推荐