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中的生命周期的更多相关文章

  1. Java对象在JVM中的生命周期

          当你通过new语句创建一个java对象时,JVM就会为这个对象分配一块内存空间,只要这个对象被引用变量引用了,那么这个对象就会一直驻留在内存中,否则,它就会结束生命周期,JVM会在合适的时 ...

  2. [转] IOS中AppDelegate中的生命周期事件的调用条件

    IOS中AppDelegate中的生命周期事件的调用条件 //当应用程序将要进入非活动状态执行,在此期间,应用程序不接受消息或事件,比如来电 - (void)applicationWillResign ...

  3. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  4. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  5. DataSnap高级技术(7)—TDSServerClass中Lifecycle生命周期三种属性说明

    From http://blog.csdn.net/sunstone/article/details/5282666 DataSnap高级技术(7)—TDSServerClass中Lifecycle生 ...

  6. 详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  7. 12、Cocos2dx 3.0游戏开发找小三之3.0中的生命周期分析

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我们执行了第 ...

  8. vue中的生命周期

    vue中的生命周期 1,vue生命周期简介: 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用.   2.created 实例已经创建完成之后被调 ...

  9. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

随机推荐

  1. C# Winform App 获取当前路径

    直接双击执行 D:\test1.exeSystem.Diagnostics.Process.GetCurrentProcess().MainModule.FileName D:\Test1.exe S ...

  2. 022configparser模块

    #配置模块 #创建import  configparser config  =  configparser.ConfigParser() #添加config["DEFAULT"]  ...

  3. 应用监控Metrics

    应用监控Metrics 一.Metrics简介        应用监控系统Metrics由Metrics.NET+InfluxDB+Grafana组合而成,通过客户端Metrics.NET在业务代码中 ...

  4. 总结:从Node爬取数据到前端图表展示

    最近寒假在家学习Node.js开发,光看书或者跟着敲代码还不够,得找一点有趣的事情来玩一玩,于是我决定写一个Node爬虫,爬取一些有意思或者说是有用的数据.这个决定只与我的兴趣有关,与Python或者 ...

  5. nginx里配置跨域

    发布于 881天前  作者 wendal  1404 次浏览  复制  上一个帖子  下一个帖子  标签: nginx 跨域 if ($request_method = OPTIONS ) { add ...

  6. PHP 获取数组随意下标key的上一个prev和下一个next下标值

    PHP 获取数组随意下标key的上一个prev和下一个next下标值 <? php $xoops[1] = '小'; $xoops[2] = '孩'; $xoops[3] = '子'; $xoo ...

  7. JS常用方法封装

    迭代添加各种常用方法:项目中一定会有很多常用的方法,包括:取值,校验,等...... 获取 url 后的参数 function getQueryString(name) { var reg = new ...

  8. 【xampp】windows下XAMPP集成环境中,MySQL数据库的使用

    在已经安装了XAMPP之后,会在你安装的目录下面出现”XAMPP“文件夹,这个文件夹就是整个XAMPP集成环境的目录. 我们先进入这个目录,然后会看到带有XAMPP标志的xampp-control.e ...

  9. Jmeter关于数据库的测试(mysql数据库)

    建立jdbc链接:创建JDBC Connection Configuration. 添加——配置元件——JDBC Connection configuration: 配置JDBC Connection ...

  10. springAOP(Aspect)权限访问页面

    1.XML进行配置切面 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...