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 ...
随机推荐
- .Net深入体验与实践第一章
什么是委托?委托和事件是什么关系? 我的理解是委托朋友,事件是一个事情比如,中午12点要吃饭了,咱家搞忘了!还在继续嗨皮,我的朋友会叫我与他一起吃饭. 什么事反射? 可以获取.Net中的每个类型(类, ...
- Redis入门实例(Redis+Sprint+maven创建工程)
一.>创建一个maven工程应用和相关配置:Redis_study,创建工程应用过程略 1.>配置pom.xml:文件内容如下 <project xmlns="http:/ ...
- 沉淀，再出发——在Hadoop集群之上安装hbase
在Hadoop集群之上安装hbase 一.安装准备 首先我们确保在ubuntu16.04上安装了以下的产品,java1.8及其以上,ssh,hadoop集群,其次,我们需要从hbase的官网上下载并安 ...
- 单片机课程设计>八音盒
2017—2018学年度第一学期 <单片机原理及应用>作品考试 八音盒 2017-2018-1<单片机原理及应用>作品设计提交文档 一.作品设计目的 1.利用51单片机的各个部 ...
- 解决Ubuntu启动错误——kernel panic not syncing vfs unable to mount root fs on unknown-block 0 0 – error
最近在倒腾Ubuntu,然后想着怎么美化一下界面,于是照着网上的教程整了一下Flatabulous这个软件,然后好像/boot就满了.关机之后再开机就出现了如题所述的错误,无法开机,也无法进入reco ...
- xwork-2.1.2.jar与xwork-core-2.1.6.jar的区别是什么？ 在线等待 先谢谢了
两个包是一样,都是struts2的核心包.不过有时下在的struts2的jar包中只有xwordk-core-2.1.6.jar包.做项目的时候最好两个都导入.
- PhoneGap 的文件 api
一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...
- Yii 验证和消息
setFlash(), getFlash()可以完成验证成功后提示 <?php # 成功信息提示 Yii::app()->user->setFlash('success', &quo ...
- 【luogu P2195 HXY造公园】 题解
题目链接:https://www.luogu.org/problemnew/show/P2195 fir.吐槽题目(省略1w字 sec.考虑对一个森林的维护,每棵树用并查集维护. 操作1:输出当前查询 ...
- Mobile IP
Mobile IP Proliferation(增生) of mobile devices: PDAs, laptops, smart phones, - As user moves, point-o ...