vue对象的生命周期

从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期。

创建期间的生命周期函数

<div id="box">
    <h3 id="h3">{{msg}}</h3>   
</div>
var vm = new Vue({
    el: "#box",
    data: {
        msg: "hello"
    },
    methods: {
        show: function () {
            alert("执行了show函数");
        }       
    },  
    //vue被完整创建之前触发,内部还没有任何属性
    beforeCreate() {
        this.show();//无法调用show方法
    },
    //vue已完整创建出来(其属性已初始化)之后触发
    created: function () {
        this.show(); //能调用show方法
    },
    //vue已完整创建出来(其属性已初始化)但数据尚未插入到dom元素时触发
    beforeMount: function () {
        alert(document.getElementById("h3").innerText);//输出{{msg}}的字符表示
    },
    //vue已完整创建出来(其属性已初始化),数据已插入dom元素时触发
    mounted: function () {
        alert(document.getElementById("h3").innerText); //正确输出msg的值
    }
});

运行期间的生命周期函数

<div id="box">
    <h3 id="h3">{{msg}}</h3>
    <input type="button" value="OK" @click="changeData"/> //点击按钮,更改msg的值
</div>
var vm = new Vue({
    el: "#box",
    data: {
        msg:"hello"
    },
    methods: {     
        changeData: function () {
            this.msg = "world";
        }
    },    
    //在vue内部的data数据已经更新且页面上的数据尚未更新之前触发
    beforeUpdate: function () {          
        alert(document.getElementById("h3").innerText); //输出hello
        alert(this.msg); //输出world
    },
    //数据在vue内部和页面上都更新完成之后触发
    updated: function () {
        alert(document.getElementById("h3").innerText); //输出world
        alert(this.msg); //输出world
    }
});

销毁期间的生命周期函数

var vm = new Vue({
    el: "#box",  
    beforeDestroy: function () {
        //组件销毁前,此时vue的各个属性都可用
    },
    destroyed: function () {
        //组件销毁后,此时vue的各个属性不可用
    }
});

Javascript - 学习总目录

Javascript - Vue - vue对象的生命周期的更多相关文章

  1. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  2. Vue2.5笔记:Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...

  3. vue基本配置和生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  4. [原创]java WEB学习笔记94:Hibernate学习之路---session 的管理,Session 对象的生命周期与本地线程绑定

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. [原创]java WEB学习笔记47:Servlet 监听器简介, ServletContext(Application 对象), HttpSession (Session 对象), HttpServletRequest (request 对象) 监听器,利用listener理解 三个对象的生命周期

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. hibernate 持久化对象的生命周期 2.1

    持久化对象的生命周期 瞬态(自由态) 表示对象在内存中存在,在数据库中没有数据相关,比如刚刚new出来的一个对象 持久态 持久态指的是持久化对象处于由Hibernate管理的状态,这种状态下持久化对象 ...

  7. Java 对象的生命周期

    Java对象的生命周期 在Java中,对象的生命周期包含下面几个阶段: 1.      创建阶段(Created) 2.      应用阶段(In Use) 3.      不可见阶段(Invisib ...

  8. 管中窥豹——从对象的生命周期梳理JVM内存结构、GC调优、类加载、AOP编程及性能监控

    如题,本文的宗旨既是透过对象的生命周期,来梳理JVM内存结构及GC相关知识,并辅以AOP及双亲委派机制原理,学习不仅仅是海绵式的吸收学习,还需要自己去分析why,加深对技术的理解和认知,祝大家早日走上 ...

  9. [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象(Pinning)

    减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...

随机推荐

  1. c# 简易绘制C语言头文件包含关系图 v2.0

    老规矩,先上图 节点样式说明: 1.粉色圆角,说明该节点下有循环引用 2.黄色菱形,说明该节点代表的文件在项目目录下未找到. 3.红色圆角,说明循环引用(从开始到最终,这种感情没变过,没有谁..... ...

  2. 【Alpha】第九次Scrum meeting

    今日任务一览: 姓名 今日完成任务 所耗时间 刘乾 由于发现之前版本的模板引擎存在致命bug,所以重新更换,现在使用jinja2作为模板渲染引擎. 3 鲁聃 卤蛋今天为了给编译老师做视频,没有做软工项 ...

  3. DPDK环境搭建及Helloworld样例

    配置虚拟机环境 多张网卡,一张网卡是无法运行DPDK的,至少要两张. 多核CPU,可以在实现多个DPDK逻辑调度核lcore. DPDK依赖参考:http://www.cnblogs.com/vanc ...

  4. 蜗牛慢慢爬 LeetCode 16. 3Sum Closest [Difficulty: Medium]

    题目 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  5. 【转载】Understanding When to use RabbitMQ or Apache Kafka

    https://content.pivotal.io/rabbitmq/understanding-when-to-use-rabbitmq-or-apache-kafka RabbitMQ: Erl ...

  6. php学习部分总结

    php Apache 阿帕奇PHP 解释器MySQL 数据库 php php文件后缀就是.php 比如1.php 2.phpphp代码 要写在<?php echo "assss&quo ...

  7. django学习--2 模板

    Django 模板 在上一章节中我们使用 django.http.HttpResponse() 来输出 "Hello World!".该方式将数据与视图混合在一起,不符合 Djan ...

  8. Windows下PyInstaller的使用教程

    直接使用Python开发的软件时有许多不方便的地方,如需要安装特定的Python环境,需要安装依赖库.为了便于部署,需要将Python源代码编译成可执行文件,编译后的可执行文件就能脱离python环境 ...

  9. Jira 的 数据库备份恢复 简单过程

    1 发现jira的备份恢复很简单, 只需要导入导出一个zip包即可 导出 选择系统 管理员入口登录 选择导入导出 进行备份系统数据 选择一个文件名就能备份 备份结果 将文件copy到上一一级目录的 i ...

  10. 小程序开发 js里面array操作的方法列表。