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 ...
随机推荐
- windows10下运行XX-net
现在墙高了,原来配置的ip4没法用了,所以重新配置一下XX-NET,这篇博客的内容参考了末尾的网站,如果我的办法行不通可以去这个网站查看其他方法 下载XX-NET 打开https://github.c ...
- 一句DOS命令搞定文件合并
用Dos的copy命令实现: copy a.js+b.js+c.js abc.js /b 将 a.js b.js c.js 合并为一个 abc.js,最后的 /b 表示文件为二进位文件,copy 命令 ...
- 文本处理三剑客之 Sed ——高级编辑命令
本篇介绍sed的高级编辑命令 高级编辑命令 P:打印模式空间开端至\n内容,并追加到默认输出之前 n: 读取匹配到的行的下一行覆盖至模式空间 N:读取匹配到的行的下一行追加至模式空间 h: 把模式空间 ...
- selenium层级定位及鼠标键盘操作
#code:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains import Actio ...
- SAP UI5和微信小程序对比之我见
今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的 ...
- Redis 缓存穿透
Redis 缓存穿透 https://www.cnblogs.com/jiekzou/p/9212114.html 场景描述:我们在项目中使用缓存通常都是先检查缓存中是否存在,如果存在直接返回缓存内容 ...
- 基于IDEA的JavaWeb开发环境搭建
基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...
- 在.Net项目中使用Redis作为缓存服务
转自:http://www.cnblogs.com/hohoa/p/5771255.html 最近由于项目需要,在系统缓存服务部分上了redis,终于有机会在实际开发中玩一下,之前都是自己随便看看写写 ...
- 2018.09.23模拟总结（T2）
T1,T3我就不说啦,反正也不会.主要想讲的是T2. T2用了一个神奇的算法:折半搜索. 因为这个坑爹的数据范围告诉我们暴搜或是状压会TLE,而一半刚好能卡过去. 折半搜索其实跟暴搜没什么区别,就是折 ...
- 20145238-荆玉茗 《网络对抗技术》-Web安全基础实践
Web安全基础实践 实践过程记录 实验准备: 输入命令java -jar webgoat-container-7.0.1-war-exec.jar,一直等待等待直到出现 在浏览器中打开localhos ...