Javascript - Vue - vue对象的生命周期
vue对象的生命周期
从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期。
创建期间的生命周期函数
<h3 id="h3">{{msg}}</h3>
</div>
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的值
}
});
运行期间的生命周期函数
<h3 id="h3">{{msg}}</h3>
<input type="button" value="OK" @click="changeData"/> //点击按钮,更改msg的值
</div>
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
}
});
销毁期间的生命周期函数
el: "#box",
beforeDestroy: function () {
//组件销毁前,此时vue的各个属性都可用
},
destroyed: function () {
//组件销毁后,此时vue的各个属性不可用
}
});
Javascript - Vue - vue对象的生命周期的更多相关文章
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- [原创]java WEB学习笔记94:Hibernate学习之路---session 的管理,Session 对象的生命周期与本地线程绑定
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记47:Servlet 监听器简介, ServletContext(Application 对象), HttpSession (Session 对象), HttpServletRequest (request 对象) 监听器,利用listener理解 三个对象的生命周期
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- hibernate 持久化对象的生命周期 2.1
持久化对象的生命周期 瞬态(自由态) 表示对象在内存中存在,在数据库中没有数据相关,比如刚刚new出来的一个对象 持久态 持久态指的是持久化对象处于由Hibernate管理的状态,这种状态下持久化对象 ...
- Java 对象的生命周期
Java对象的生命周期 在Java中,对象的生命周期包含下面几个阶段: 1. 创建阶段(Created) 2. 应用阶段(In Use) 3. 不可见阶段(Invisib ...
- 管中窥豹——从对象的生命周期梳理JVM内存结构、GC调优、类加载、AOP编程及性能监控
如题,本文的宗旨既是透过对象的生命周期,来梳理JVM内存结构及GC相关知识,并辅以AOP及双亲委派机制原理,学习不仅仅是海绵式的吸收学习,还需要自己去分析why,加深对技术的理解和认知,祝大家早日走上 ...
- [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象(Pinning)
减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...
随机推荐
- Linux内核分析——第二周学习笔记
20135313吴子怡.北京电子科技学院 chapter 1 知识点梳理 (一)计算机是如何工作的?(总结)——三个法宝 ①存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ②函数调用堆栈,高 ...
- 搭建ZooKeeper
从http://zookeeper.apache.org/ 官网上下载最新的zookeeper版本, 我下载的版本是 zookeeper-3.4.6.tar.gz, 解压: 配置conf/zoo.cf ...
- 数据平面可编程与SDN关系理解,以及数据平面可编程的理解
数据平面可编程与SDN关系 狭义 广义 数据平面可编程的理解 狭义 广义
- DOM父节点、子节点例子
父节点 <body> <ul id="oUl"> <li><a href="#">隐藏1</a>&l ...
- Tomcat下bootstrap启动分析
"C:\Program Files\Java\jdk1.7.0\bin\javaw.exe" -agentlib:jdwp=transport=dt_socket,suspend= ...
- Linux dd命令制作U盘启动盘
linux下的dd命令来自于coreutils:http://www.gnu.org/software/coreutils/ https://jingyan.baidu.com/article/d45 ...
- [转帖]"微信支付"勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.
"微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...
- [转帖] tmux 的使用说明
之前曾经看过 tmux 的简介 但是一直不会用 这次 看了下 原来是这么处理 不过 用windows 多了 还是感觉鼠标 操作多一些 全键盘操作的习惯 还是没有养成. 原贴地址: https://ww ...
- Spring之AOP实现原理
- Python学习-------------------三级菜单简单版
题目: 多级菜单 1.三级菜单 2.可依次选择进入的各子菜单 3.所需新知识点:列表.字典 ReadMe: 这个做循环,比较绕脑子 点开运行即可 Min ...