vuejs中的生命周期
vue中生命周期分为初始化，跟新状态，销毁三个阶段
1.初始化阶段：beforeCreated，created，beforeMount，mounted
2.跟新状态：beforeUpdate，update
3.销毁vue实例：beforeDestory，destoryed
其中created/mounted 可以用来发送ajax请求，启动定时器等异步任务
beforeDestroy用来收尾工作，如清除定时器
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_Vue实例_生命周期</title>
</head>
<body>
<div id="test">
<button @click="destroyVue">destory vue</button>
<p v-if="isShow">你好</p>
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
isShow: true
}, beforeCreate() {
console.log('beforeCreate()')
}, created() {
console.log('created()')
}, beforeMount() {
console.log('beforeMount()')
}, mounted () {
console.log('mounted()')
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
}, beforeUpdate() {
console.log('beforeUpdate()')
},
updated () {
console.log('updated()')
}, beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
}, destroyed() {
console.log('destroyed()')
}, methods: {
destroyVue () {
this.$destroy()//触发 beforeDestroy 和 destroyed 的钩子。
}
}
}) </script>
</body>
</html>
运行结果：
vuejs中的生命周期的更多相关文章
- Java对象在JVM中的生命周期
当你通过new语句创建一个java对象时,JVM就会为这个对象分配一块内存空间,只要这个对象被引用变量引用了,那么这个对象就会一直驻留在内存中,否则,它就会结束生命周期,JVM会在合适的时 ...
- [转] IOS中AppDelegate中的生命周期事件的调用条件
IOS中AppDelegate中的生命周期事件的调用条件 //当应用程序将要进入非活动状态执行,在此期间,应用程序不接受消息或事件,比如来电 - (void)applicationWillResign ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- DataSnap高级技术(7)—TDSServerClass中Lifecycle生命周期三种属性说明
From http://blog.csdn.net/sunstone/article/details/5282666 DataSnap高级技术(7)—TDSServerClass中Lifecycle生 ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 12、Cocos2dx 3.0游戏开发找小三之3.0中的生命周期分析
重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我们执行了第 ...
- vue中的生命周期
vue中的生命周期 1,vue生命周期简介: 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用. 2.created 实例已经创建完成之后被调 ...
- 了解angularjs中的生命周期钩子函数$onInit，$onChange，$onDestory，$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
随机推荐
- Python 冒泡排序法分析
冒泡排序法 def maopao(): array = [2,1,3,6,5,4] #确定一组需要排序的数值列表 for i in range(len(array)-1): #大循环次数=列表长度,但 ...
- 从0开始学CentOS7（2）---安装mariaDB、jdk1.8、redis
继续前面的基础步骤~ 这个是centos7自带的数据库MariaDB,以前是mysql,到7以后,改为MariaDB... 1. MariaDB安装,没有往深处配置...懒得动了..参考:http:/ ...
- slf4j-log4j12-1.5.8.jar有什么用
slf4j是hibernate的日志接口,通常我们用log4j.jar来实现hibernate的记录日志功能,slf4j-log4j.jar可以看成是用来把slf4j的接口转换成适合log4j的接口的 ...
- 正则工具类 -- RegexUtils
import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import java.util. ...
- 问题解决：java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date
问题描述: 数据表中有记录的time字段(属性为timestamp)其值为:“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常: Java.sql.SQLE ...
- nbu异地备份实施前，数据收集日志
1.修改bp.conf配置文件显示重删率 BPDBJOBS_COLDEFS = JOBID 5 true BPDBJOBS_COLDEFS = TYPE 7 false BPDBJOBS_COLDEF ...
- nodejs中的fiber（纤程）库详解
fiber/纤程 在操作系统中,除了进程和线程外,还有一种较少应用的纤程(fiber,也叫协程).纤程常常拿来跟线程做对比,对于操作系统而言,它们都是较轻量级的运行态.通常认为纤程比线程更为轻量,开销 ...
- git的一些小命令
git_cmd git常用命令 <>代表变量,例如 代表分支名称 远程库 查看远程库信息 git remote -v 查看远程仓库:$ git remote -v 添加远程仓库:$ git ...
- 【题解】洛谷P1315 [NOIP2011TG] 观光公交（前缀和+贪心）
次元传送门:洛谷P1315 思路 思路大概想到了 可是代码实现却没想到 所以参考题解了 D2T3的贪心果然有难度 我们考虑在每次用加速器有两种情况 到下一个点还需要等待:以后的时间就不再影响了 到下一 ...
- CSU - 1224 ACM小组的古怪象棋
传送门: http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1224 1224: ACM小组的古怪象棋 Lime Limit: 1 Sec ...