<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue2.2.js"></script>
<title>构造器的声明周期</title>
</head>
<body>
<h1>构造器的声明周期</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">加分</button></p>
</div>
<button onclick="vm.$destroy()">销毁</button>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
add: function() {
this.count++;
}
},
beforeCreate: function() {
console.log('1-beforeCreate 初始化之后');
},
created: function() {
console.log('2-created 创建完成');
},
beforeMount: function() {
console.log('3-beforeMount 挂载之前');
},
mounted: function() {
console.log('4-mounted 被创建');
},
beforeUpdate: function() {
console.log('5-beforeUpdate 数据更新前');
},
updated: function() {
console.log('6-updated 被更新后');
},
activated: function() {
console.log('7-activated');
},
deactivated: function() {
console.log('8-deactivated');
},
beforeDestroy: function() {
console.log('9-beforeDestroy 销毁之前');
},
destroyed: function() {
console.log('10-destroyed 销毁之后')
} })
</script>
</body>
</html>

create 和 mounted 相关:
beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载 dom元素已经加载到HTML中

destroy 相关: 执行:vm.$destroy()
销毁完成后,我们再重新改变count的值,vue不再对此动作进行响应了。
但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

生命周期总结:
beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容-

vue2.0生命周期函数的更多相关文章

  1. vue2.0 生命周期 简析

    Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...

  2. Vue2.0生命周期和钩子函数的一些理解

    转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...

  3. Vue2.0 —生命周期和钩子函数

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  4. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  5. vue2.0生命周期

    https://www.cnblogs.com/goloving/p/8616989.html(copy )

  6. vue2.0生命周期详解

    首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...

  7. Vue2.0 - 生命周期

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  8. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  9. 02Vue2.0+生命周期

    Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...

随机推荐

  1. publish and submit

    http://blog.csdn.net/w_jewelry/article/details/8123639 1.Gerrit里点击“publish and submit”提示如下:Your chan ...

  2. 基于COCHONUT做和弦识别

    论文为:COCHONUT: Recognizing Complex Chords From MIDI Guitar Sequences 出处:international symposium/confe ...

  3. 在linq语言中,不能准确按拼音排序(转)

    在项目中,利用OrderBy/OrderByDescending, ThenBy/ThenByDescending这4个方法排序时,发现了这样的问题:在本机测试,能正确按拼音排序:但是放上服务器是,就 ...

  4. String类的直接赋值和构造方法赋值的区别

    直接赋值:只开辟一块堆内存空间,而且保存的字符串可以自动入池,以供其他内容相同的字符串对象使用. 构造方法:开辟两块堆内存空间,有一块成为垃圾,并且字符串的内容无法自动入池,但是可以使用String类 ...

  5. 哈理工OJ P2320:OX

    题目链接:OX 题意 :给出一个3X3的黑白棋棋盘,棋盘上有若干黑白子,再给出下一个下的人,问下一个下的人能否赢 分析:考虑到只有39种状态,故用一个数保存目前棋盘的状态,记为value,再枚举空位D ...

  6. bzoj 1863: [Zjoi2006]trouble 皇帝的烦恼【二分+dp】

    二分答案,注意l是max(a[i]+a[i+1]),r是sum_a 判断的时候用dp,设f[i]为i与1最少的相同颜色数,g[i]为i与1最多的相同颜色数,转移是f[i]=max(a[i]-(w-a[ ...

  7. bzoj 2525: [Poi2011]Dynamite【二分+树上贪心】

    一眼二分.然后重点是树上贪心部分 长得像dp一样,设mn为子树内已炸点的最浅点,mx为子树内没有炸并且需要炸的最深点,然后转移直接从子树继承即可 然后是判断当前u点是否需要炸,当mx[u]+mn[u] ...

  8. 3198: [Sdoi2013]spring【容斥原理+hash】

    容斥是ans= 至少k位置相等对数C(k,k)-至少k+1位置相等对数C(k+1,k)+至少k+2位置相等对数*C(k+2,k) -- 然后对数的话2^6枚举状态然后用hash表统计即可 至于为什么要 ...

  9. Taro 小程序 自定义导航栏

    在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑 首先需要在app.js 中给全局的导航栏隐藏, // app.js window: { navigationStyle: ...

  10. ObjectARX2012错误1 fatal error C1083: 无法打开包括文件:“arxHeaders.h”: No such file or directory; fatal error C1083: 无法打开包括文件:“map”: No such file or directory

    问题1:fatal error C1083: 无法打开包括文件:“arxHeaders.h”: No such file or directory: 解决办法:这个问题很明显,是因为没有在工程属性里包 ...