vue生命周期的详解（Vue实例对象的生命周期详解）

软件下载投稿 2022-06-10 16:57:44 浏览

通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下

var vm = new Vue({...})

那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下

在这里插入图片描述

此图为Vue官方给出的生命周期图，可先大概浏览下，如果不懂先不管，继续往下看。

Vue实例生命周期

上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理解将这些方法分为了三类，分别如下:
创建期间的生命周期函数

方法	说明
beforeCreate	第一个生命周期方法，表示实例被创建出来之前会被调用 ,此时，还没有初始化好 data 和 methods 属性
created	实例已经在内存中创建完成，此时 data 和 methods 已经创建完成，此时还没有开始编译模板
beforeMount	此时已经完成了模板的编译，但是还没有挂载到页面中
mounted	此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数

方法	说明
beforeUpdate	状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated	实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数

方法	说明
beforeDestory	实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会被绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

beforeCreate

首先我们来看下beforeCreate这个方法，这个方法是生命周期的第一个方法，此时Vue实例中的 data 和 methods的内容都还没有被加载如下:

基础页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
    </div>
    <script >
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'ok'
            },
            methods: {
                show: function(){
                    console.log("show 方法执行了...")
                }
            }
        })
    </script>
</body>
</html>

然后我们来看下 beforeCreate方法的效果

在这里插入图片描述

通过页面控制台可以看到 data中的数据和 methods中的方法都没有被初始化好。

created

接下来看下 created 方法，该方法是在Vue实例创建完成后被调用用的，且 data和methods 中的都被初始化好了，我们来测试下。

在这里插入图片描述

效果

在这里插入图片描述

beforeMount

beforeMount 执行的时候已经完成了模板的编译，但是还没有挂载到页面中,我们通过案例来演示下。

在这里插入图片描述

效果

在这里插入图片描述

通过效果可以看出 beforeMount 方法执行的时候内存的中的数据已经被改变了，但是页面中的数据还没有被渲染。

mounted

mounted方法执行的时候已经将编译好的模板，挂载到了页面指定的容器中显示。

在这里插入图片描述

效果

在这里插入图片描述

通过效果也能看出 mounted 方法执行的时候，内存和页面的数据都已经更新了。
注意： mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静地躺在我们的内存中，一动不动.

beforeUpdate

接下来的是运行中的两个方法，beforeUpdate 方法，状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。

在这里插入图片描述

通过效果我们可以看到，当beforeUpdate方法执行的时候，内存的数据被更新了，但是此时页面中的数据还没有被更新。

updated

实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

在这里插入图片描述

效果

在这里插入图片描述

通过效果可以看到，当 updated方法执行的时候，内存和页面中的数据都已经被更新了！

beforeDestory

beforeDestory 效果不太好演示，实例销毁之前调用。在这一步，实例仍然完全可用，大家记住这个即可

destoryed

同样该方法也不好演示，该方法执行的时候，实例已经不可使用了。

「真诚赞赏，手留余香」

转载请注明：首页 > 投稿 » vue生命周期的详解（Vue实例对象的生命周期详解）

上一篇 : centOS7安装MySQL教程（CentOS7 安装mysql详解）

下一篇 : nginx重启命令（nginx启动重启关闭命令）

继续浏览有关编程的文章

发表评论

留言与评论（共有 0 条评论）

版权声明

求资源网所发布的一切破解补丁,软件,以及其他分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途。
否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。