首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue教程12(实例生命周期介绍)

Vue教程12(实例生命周期介绍)

作者头像
用户4919348
发布2019-07-19 10:53:14
4860
发布2019-07-19 10:53:14
举报
文章被收录于专栏:波波烤鸭波波烤鸭

  通过前面的介绍我们知道使用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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年07月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue实例生命周期
    • beforeCreate
      • created
        • beforeMount
          • mounted
            • beforeUpdate
              • updated
                • beforeDestory
                  • destoryed
                  相关产品与服务
                  容器服务
                  腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档