Vue的生命周期

最新推荐文章于 2024-07-22 11:56:16 发布

沐小侠

最新推荐文章于 2024-07-22 11:56:16 发布

阅读量360

点赞数

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

本文链接：https://blog.csdn.net/weixin_41092938/article/details/115863524

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

每个 Vue 实例在被创建时都有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。下图展示了实例的生命周期。
在这里插入图片描述

Vue生命周期可以分为8个阶段

beforeCreate（创建前）
在vue实例完全被创建出来之前(意思就是说vue实例还没有被完全创建出来)被调用，此时数据还没有被初始化，所以无法访问数据
created（创建后）
在vue实例创建完成后被调用，这个过程已完成了数据的初始化，可以被访问得到，也能获得methods方法；这个过程可以修改数据，这也是渲染之前修改数据的机会。
beforeMount（载入前）
这个过程是在模版已经在内存中编译完成，挂载之前被调用，render函数也是首次被调用，此时完成了虚拟Dom的构建，但并未被渲染，这也是最后一次修改数据的机会。
mounted（载入后）
表示内存中的模板已经渲染到页面中去，这个时候数据已经可以经过Vue的编译，该函数是实例创建的最后一个函数，此时实例已经完全创建好了，如果没有别的操作的话，此函数就静静躺在内存中，如果要使用某些插件操作页面上的DOM，最早要在mounted中操作。
beforeUpdate（修改前）
这个过程是在重新渲染之前(更新前)调用，这个过程页面中显示的数据并没有更新，但是内存中的数据已经改变，也就是说此时页面尚未和最新的数据保持同步。
updated（修改后）
这个过程在重新渲染之后（更新后调用）被调用，页面中的数据已经和内存中保持一致了，也就是说此时已经是最新的了。
beforeDestroy（销毁前）
这个过程是vue实例销毁之前被调用，在这个过程中我们可以做一些事情，比如清除计时器或事件等等。
destroyed（销毁后）
vue实例销毁后调用，并且vue实例中所有的东西都会解绑，所有的事件监听器都会被移除，所有的子实例也会被销毁。

通过数据渲染了解Vue的生命周期的执行顺序以及什么时候执行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue生命周期学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            Vue的生命周期<p id="num">{{num}}</p>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            beforeCreate: function() {
                console.group('------beforeCreate创建前状态------');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);//undefined
                console.log("data中的num: " + this.num)//undefined
            },
            created: function() {
                console.group('------created创建完毕状态------');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            beforeMount: function() {
                console.group('------beforeMount挂载前状态------');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            mounted: function() {
                console.group('------mounted 挂载结束状态------');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            beforeUpdate: function() {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            updated: function() {
                console.group('updated 更新完成状态===============》');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            beforeDestroy: function() {
                console.group('beforeDestroy销毁前状态===============》');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            },
            destroyed: function() {
                console.group('destroyed 销毁完成状态===============》');
                console.log("页面中的num："+document.getElementById("num").innerHTML);
                console.log("data中的message: " + this.message);
                console.log("data中的num: " + this.num)
            }
        })
        //模拟数据发生改变
        setTimeout(() => {vm.num += 1;}, 2000);
        //模拟vm实例被销毁
        setTimeout(() => {vm.$destroy();}, 5000);
    </script>
</html>