Vue的生命周期：

在理解vue生命周期前要把握它的三个重点： 创建-> 改变 -> 销毁

创建：

1.执行beforeCreate

　　　　 2.监控data

　　　　 3.注册事件

4.执行create

5.执行beforeMount

6.执行Mounted

注意：将来执行异步请求时一定要  将请求数据的方法写在beforeCreate事件之外，否则的话将来得到数据以后无法操作data中的属性

改变:

　　　　改变data中的数据：

　　　　　　1.先执行beforUpdate

　　　　　　2.重新生成虚拟dom

　　　　　　3.再执行update

销毁:

　　   1.执行beforeDestroy

　　　2.执行destroy

触发销毁条件： 从一个页面跳转到另一个页面

　　　应用: 清除内存中的这个vue对象

一.创建Vue时执行的钩子函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <script src="../axios.js"></script>

 <script src="../vue2.4.4.js"></script>

 </head>

 <body>

 <!-- 定义一个vue的管理区块，（MVVM中的View） -->

 <div id="app">

 </div>

 </body>

 <script>

       // 1 将路径的主机名和端口号统一设置

       axios.defaults.baseURL = "http://157.122.54.189:9093";

       // 2 将axios加到vue原型对象中

       Vue.prototype.$http = axios;

     // 实例化vue对象（MVVM中的View Model）

     new Vue({

         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析

         el:'#app',

         data:{

         // 数据 （MVVM中的Model）

         name:"小明"

         },

         beforeCreate:function() {

             console.log("01.beforeCreate :"+this.name);

         },

         created:function() {

             console.log("02.created :"+this.name);

                 // 改变this指向

                 _this = this;

                 this.$http.get("/api/getprodlist").then(function(result){

                     var res = result.data;

                     _this.name = res.message[0].name;

                 });

         },

         beforeMount:function() {

             console.log("03.beforeMount :"+this.name);

         },

         mounted:function() {

             console.log("04.mounted :"+this.name);

         }

     })

 </script>

 </html>

二.更新数据时执行的钩子函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <script src="../axios.js"></script>

 <script src="../vue2.4.4.js"></script>

 </head>

 <body>

 <!-- 定义一个vue的管理区块，（MVVM中的View） -->

 <div id="app">

     {{name}}

 </div>

 </body>

 <script>

       // 1 将路径的主机名和端口号统一设置

       axios.defaults.baseURL = "http://157.122.54.189:9093";

       // 2 将axios加到vue原型对象中

       Vue.prototype.$http = axios;

     // 实例化vue对象（MVVM中的View Model）

     var vm = new Vue({

         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析

         el:'#app',

         data:{

         // 数据 （MVVM中的Model）

         name:"小明"

         },

         beforeCreate:function() {

             //输出this.name是undifined 因为还没有加载

             console.log("01.beforeCreate :"+this.name);

         },

         created:function() {

             console.log("02.created :"+this.name);

         },

         beforeMount:function() {

             console.log("03.beforeMount :"+this.name);

         },

         mounted:function() {

             console.log("04.mounted :"+this.name);

         },

         beforeUpdate:function() {

             console.log("05.beforeUpdate :"+this.name);

         },

         updated:function() {

             console.log("06.updated :"+this.name);

         }

     })

 </script>

 </html>

Vue--vue中的生命周期的更多相关文章

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

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

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

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

  3. vue中的生命周期

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

  4. Vue2.5笔记：Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...

  5. vue基本配置和生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. SpringCloud学习笔记（三）：Rest微服务构建案例工程模块

    需要具备的知识 1 springmvc+mybatis+mysql 2 Consumer消费者(Client)通过REST调用Provider提供者(Server)提供的服务 3 Maven的分包分模 ...

  2. css 渐变背景

    background: linear-gradient(left,#fa7f6d, #fc5e7f); left: 从左边开始

  3. myeclipse中tomcat内存大小的设置

    刚刚安装了myeclipse9.0,又配置了tomcat7.0,想用ssh框架搭个项目试试tomcat7.0,没想到刚启动项目就会报错,在tomcat6.0中就不会有问题,上网查了那些都不起作用,后来 ...

  4. leyou_06_图片上传至FastDFS

    1.推荐一个开源的FastDFS客户端,支持最新的SpringBoot2.0.配置使用极为简单,支持连接池,支持自动生成缩略图 1.1 在文件上传的微服务中 引入依赖 <dependency&g ...

  5. mysql基础教程(一)-----概述、安装、查询

    概述 好处 •实现数据持久化 •使用完整的管理系统统一管理,易于查询 概念 DB 数据库(database):存储数据的“仓库”.它保存了一系列有组织的数据. DBMS 数据库管理系统(Databas ...

  6. VS 快捷键和正则替换

    本文在VS2017中可用 1.注释 :Ctrl  K C 取消注释: Ctrl K U 2.整理代码格式: Ctrl K D 或者 Ctrl K F 3.快速切换不同的代码窗口  Ctrl+Tab 4 ...

  7. N!中素因子p的个数 【数论】

    求N!中素因子p的个数,也就是N!中p的幂次 公式为:cnt=[n/p]+[n/p^2]+[n/p^3]+...+[n/p^k]; 例如:N=12,p=2 12/2=6,表示1~12中有6个数是2的倍 ...

  8. 1.关于Spring Cloud的一些基本知识

    GA代表 general avaliable 通用可用版  也就是 正式发行版 PRE 代表预版本  就是还没有成熟 SNAPSHOT 快照版 这个版本可用 没有bug但是后期还会改进 选了这个spr ...

  9. JasperReport报表参数9

    填充一个报表的主要输入是:报表模板,参数和数据源.本章将介绍这些参数,并在接下来的章节中,我们将介绍数据源. 参数是在报表填充操作传递给报表引擎的对象引用.参数传递有用的数据到报表引擎,它可以不通过数 ...

  10. Octave 软件的安装

    每次安装软件都感觉是一种心痛的历程.下载安装,然后就跳出一堆的错误,之后就各种百度求救,然后就搞了大半天,有时候还搞不定. 最后,搞定的时候发现,原来这么简单,结果时间就这样浪费了,所以还是把这个过程 ...