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. Linux内核分析——第二周学习笔记

    20135313吴子怡.北京电子科技学院 chapter 1 知识点梳理 (一)计算机是如何工作的?(总结)——三个法宝 ①存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ②函数调用堆栈,高 ...

  2. 搭建ZooKeeper

    从http://zookeeper.apache.org/ 官网上下载最新的zookeeper版本, 我下载的版本是 zookeeper-3.4.6.tar.gz, 解压: 配置conf/zoo.cf ...

  3. 数据平面可编程与SDN关系理解,以及数据平面可编程的理解

    数据平面可编程与SDN关系 狭义 广义 数据平面可编程的理解 狭义 广义

  4. DOM父节点、子节点例子

    父节点 <body> <ul id="oUl"> <li><a href="#">隐藏1</a>&l ...

  5. Tomcat下bootstrap启动分析

    "C:\Program Files\Java\jdk1.7.0\bin\javaw.exe" -agentlib:jdwp=transport=dt_socket,suspend= ...

  6. Linux dd命令制作U盘启动盘

    linux下的dd命令来自于coreutils:http://www.gnu.org/software/coreutils/ https://jingyan.baidu.com/article/d45 ...

  7. [转帖]"微信支付"勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.

    "微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...

  8. [转帖] tmux 的使用说明

    之前曾经看过 tmux 的简介 但是一直不会用 这次 看了下 原来是这么处理 不过 用windows 多了 还是感觉鼠标 操作多一些 全键盘操作的习惯 还是没有养成. 原贴地址: https://ww ...

  9. Spring之AOP实现原理

  10. Python学习-------------------三级菜单简单版

    题目: 多级菜单         1.三级菜单         2.可依次选择进入的各子菜单         3.所需新知识点:列表.字典 ReadMe: 这个做循环,比较绕脑子 点开运行即可 Min ...