1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script type="text/javascript" src="vue2.2.js"></script>
  6.         <title>构造器的声明周期</title>
  7.     </head>
  8.     <body>
  9.         <h1>构造器的声明周期</h1>
  10.         <hr>
  11.         <div id="app">
  12.             {{count}}
  13.             <p><button @click="add">加分</button></p>
  14.         </div>
  15.         <button onclick="vm.$destroy()">销毁</button>
  16.         <script type="text/javascript">
  17.             var vm = new Vue({
  18.                 el: '#app',
  19.                 data: {
  20.                     count: 1
  21.                 },
  22.                 methods: {
  23.                     add: function() {
  24.                         this.count++;
  25.                     }
  26.                 },
  27.                 beforeCreate: function() {
  28.                     console.log('1-beforeCreate 初始化之后');
  29.                 },
  30.                 created: function() {
  31.                     console.log('2-created 创建完成');
  32.                 },
  33.                 beforeMount: function() {
  34.                     console.log('3-beforeMount 挂载之前');
  35.                 },
  36.                 mounted: function() {
  37.                     console.log('4-mounted 被创建');
  38.                 },
  39.                 beforeUpdate: function() {
  40.                     console.log('5-beforeUpdate 数据更新前');
  41.                 },
  42.                 updated: function() {
  43.                     console.log('6-updated 被更新后');
  44.                 },
  45.                 activated: function() {
  46.                     console.log('7-activated');
  47.                 },
  48.                 deactivated: function() {
  49.                     console.log('8-deactivated');
  50.                 },
  51.                 beforeDestroy: function() {
  52.                     console.log('9-beforeDestroy 销毁之前');
  53.                 },
  54.                 destroyed: function() {
  55.                     console.log('10-destroyed 销毁之后')
  56.                 }
  57.  
  58.             })
  59.         </script>
  60.     </body>
  61. </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. 必备java参考资源列表

    现在开始正式介绍这些参考资源. Web 站点和开发人员 Web 门户 网络无疑改变了共享资源和出版的本质(对我也是一样:您正在网络上阅读这篇文章),因此,从每位 Java 开发人员都应该关注的关键 W ...

  2. UVa 12403 - Save Setu

    题目:有两种操作:1.当前数值添加.2.输出当前数值. 分析:简单题.模拟就可以. 说明:A+B. #include <iostream> #include <cstdlib> ...

  3. 一步一步学Silverlight 2系列（3）：界面布局

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. java 泛型的理解与应用

    为什么使用泛型? 举个例子: public class GenericTest { public static void main(String[] args) { List list = new A ...

  5. python from import与import as 的含义

    from os import makedirs, unlink, sep #从os包中引入 makedirs.unlink,sep类 from os.path import dirname, exis ...

  6. 第十七周 - OpenCV 学习笔记 S1 - OpenCV 基本函数

    Imread()函数: 基本功能:读取图像到OpenCv中. 1.函数原型: Mat imwrite(const strings& filename, int flag = 1); 第一个参数 ...

  7. asp.net web.config配置节说明（转发）

    原文地址:http://www.cnblogs.com/qingyuan/articles/1501644.html web.config 文件查找规则:      (1)如果在当前页面所在目录下存在 ...

  8. 关于kindle无法连接上wifi的问题

    家里换了宽带以后我发现kindle无法链接上WiFi了. 原因可能是我家使用的WiFi网络是1-11之间的信道,也有可能是运营商的问题(由于我是软件开发,对硬件和网络并不是很清楚,只能大概估计一下). ...

  9. bzoj 4195: [Noi2015]程序自动分析【并查集】

    等于有传递性,所以hash一下把等于用并查集连起来,然后再判断不等于是否合法即可 #include<iostream> #include<cstdio> #include< ...

  10. Luogu P1073 最优贸易【最短路/建反图】 By cellur925

    题目传送门 这么经典的题目,还是看了lyd的题解....唉难过. 一句话题意:在一张点有全都的图上找一条从1到n的路径,存在两个点p,q(p<q),使val[q]-val[p]最大. 给出的图是 ...