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 ...
随机推荐
- CentOS 系统新装每次必看，直到背下。。
1.CentOS7 mini 修改网卡信息: vi /etc/sysconfig/network-scripts/ifcfg-ens192 ONBOOT = yes vi /etc/resolv.co ...
- redis在windows平台安装和启动
官网: https://redis.io/ 中文网站:http://www.redis.net.cn/ 一.下载windows版本的redis 官网没有提供windows版本的下载,只有linux版本 ...
- 代码阅读：AFNetworking背后的思想
1.一切皆文件:流与操作封装. 2.通信会话:
- im2rec打包图片
https://mxnet.incubator.apache.org/faq/finetune.html python ~/mxnet/tools/im2rec.py --list --recursi ...
- 数学归纳法·Fibonacci数列
数学归纳法 我们先来看一个例子: 我们让多诺米骨牌倒下的充要条件是: 第一块骨牌倒下: 假设当当前块骨牌倒下时,则他的后面一块也会倒下. 我们把这个例子给抽象出来就可以得到数学归纳法的证明过程: [第 ...
- （第二场）A Run 【动态规划】
链接:https://www.nowcoder.com/acm/contest/140/A 题目描述: White Cloud is exercising in the playground.Whit ...
- 如何调试在OJ中的代码
在OJ上的原始程序: class Solution { public: ) return; ; ; while(*str != '\0'){ if(*str == ' '){ blank++; len ...
- es6之proxy和reflect
一.proxy //Proxy和Reflect //供应商 let obj={ time:"2017-11-21", name:"net", _r:123 } ...
- eclipse 设置字体大小
步骤: 1.打开eclipse,在工具栏里找到 Window -> Perferences,打开如下图: 2.展开General -> Appearance -> Colors an ...
- 使用Spring实现AOP(XML+注解)
一.Spring对AOP的支持 AOP并不是Spring框架特有的,Spring只是支持AOP编程的框架之一,每一个框架对AOP的支持各有特点,有些AOP能够对方法的参数进行拦截,有些AOP对方法进行 ...