阅读目录

1.理解VUE---混合

在了解Vue生命周期之前，我们先来学习Vue中的混合吧；

为什么需要使用混合？
  假如当我们开发时候，a.js和b.js都有公用的代码的时候，我们可以把他们抽取出来，在a.js或b.js的需要的时候可以引用进来即可，这可以简单的理解为混合。
  混合对象可以包含任意组件选项，所有混合对象的选项将被混入该组件本身的选项。什么意思呢？可以简单的理解为该组件引入该混合对象的时候，该组件拥有该混合对象的所有属性和方法。
看下如下demo代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>演示Vue</title>
  5.   </head>
  6.   <body>
  7.     <div id='app'>
  8.     </div>
  9.   </body>
  10.   <script src="./vue.js"></script>
  11.   <script type="text/javascript">
  12.     // 定义一个混合对象
  13.     var myMixin = {
  14.       template: '<div>hello world</div>',
  15.       methods: {
  16.         hello: function() {
  17.           console.log('hello');
  18.         },
  19.         say: function() {
  20.           console.log('I am longen');
  21.         }
  22.       }
  23.     };
  24.     // 定义一个组件 使用上面的混合对象
  25.     var Component = Vue.extend({
  26.       mixins: [myMixin],
  27.       methods: {
  28.         list: function() {
  29.           console.log('lists');
  30.         },
  31.         say: function() {
  32.           console.log('I am kongzhi');
  33.         }
  34.       }
  35.     });
  36.     // 实例化
  37.     var Vm = new Component({
  38.       el: '#app'
  39.     });
  40.     Vm.hello(); // 打印出 hello
  41.     Vm.list();  // 打印 lists
  42.     Vm.say();   // 打印 I am kongzhi
  43.   </script>
  44. </html>

上面代码可以看到 当实例化对象本身和混合对象有相同的函数名的时候，会先调用自身的函数，如果自身的函数不存在，才会
寻找混合对象的函数名。

2.Vue实例化选项

在实例化vue时，需要传入一个选项对象，它可以包含数据(data), 模板(template), 挂载元素(el), 方法(methods), 生命周期构造选项等。
2-1 data
Vue实例的数据都保存在data对象中，Vue将会递归将data的属性转换为getter/setter, 让data数据能够响应变化。
比如如下代码：

  1. var data = {
  2.   a: 1
  3. };
  4. var vm = new Vue({
  5.  data: data
  6. });
  7. console.log(vm);
  8. console.log(vm.a === data.a); // true
  9. console.log(vm.$data === data); // true

2-2 computed
该属性可以理解为计算属性，getter 和 setter的this上下文自动的绑定vue的实例。如下代码：

  1. var vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     message: 'Hello'
  5.   },
  6.   computed: {
  7.     reversedMessage: function() {
  8.       return this.message.split('').reverse().join('')
  9.     }
  10.   }
  11. });
  12. console.log(vm.reversedMessage);  // olleH

切记：调用属性 只能 vm.reversedMessage, 因为不是调用方法，后面不能加小括号；且后面的function不要使用箭头函数代替，因为this一般都指向vue的实例。

2-3 methods
从字面量理解可以认为 是vue的所有方法写在该对象中，可以直接通过vue实例访问这些方法。方法中this指向vue的实例。如下代码：

  1. var vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     message: 'Hello'
  5.   },
  6.   methods: {
  7.     reversedMessage: function () {
  8.       return this.message.split('').reverse().join('')
  9.     }
  10.   }
  11. });
  12. console.log(vm.reversedMessage()) // -> 'olleH'

从上面的 methods 和 computed看 他们两者都可以做同样的事情，那么他们的区别是？computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对
属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。

2-4 watch
可以理解为 观察某个值发生变化的回调函数。值也可以是方法名，或者包含选项的对象，Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。
如下代码：

  1. var vm = new Vue({
  2.   data: {
  3.     a: 11,
  4.     b: 22,
  5.     c: 33
  6.   },
  7.   watch: {
  8.     // 监控a变量变化的时候，会自动执行该函数。
  9.     a: function(newVal, oldVal) {
  10.       console.log(newVal);  // 打印 12
  11.       console.log(oldVal);  // 打印 11
  12.     }
  13.   }
  14. });
  15. vm.a = 12; // 改变a的值，会自动调用watch对象中的a函数，返回新值 和 旧值。

3.Vue实例化的生命周期

实例化生命周期 从开始创建，初始化数据，编译模板，挂载Dom->渲染， 更新->重新渲染，销毁等。

  1. beforeCreate: function() {}  // 在实例初始化之后， 数据观测 和 event/watcher 事件配置之前被调用。
  2. created: function() {}       // 实例已经创建完成之后被调用。实例已完成如： 数据观测，属性和方法的计算，watch/event事件回调。
  3. beforeMount: function() {}   // 在挂载开始之前被调用， 该函数在服务器端渲染期间不会被调用。
  4. mounted: function() {}       // el被新创建的 vm.$el替换，并挂载到实例上去之后调用该函数，在该函数内可以获取元素。
  5. render: function() {}        // 页面被渲染时会调用该函数。该函数在mounted之前会被调用。
  6. beforeUpdate: function(){}   // 数据更新时调用，发生在虚拟Dom重新渲染之前。该函数在服务器端渲染期间不会被调用。
  7. updated: function() {}       // 由于数据更改导致虚拟DOM重新被渲染会调用。在被渲染后调用该函数。可以或许新的dom元素。该函数在服务器端渲染期间不会被调用。
  8. activated: function() {}     // keep-alive组件激活时调用 该函数在服务器端渲染期间不会被调用。
  9. deactivated: function(){}    // keep-alive 组件停用时被调用。该函数在服务器端渲染期间不会被调用。
  10. beforeDestroy: function(){}  // 实例销毁之前被调用，实例仍然完全可用 该函数在服务器端渲染期间不会被调用。
  11. destroyed: function() {}     // Vue 实例销毁后调用，调用后，Vue实例所有东西都会被解绑定，所有的事件监听器会被移除，所有的实例被销毁。

下面看看代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>演示Vue</title>
  5.   </head>
  6.   <body>
  7.     <div id='app'>
  8.       <p> {{ number }} </p>
  9.       <input type='text' v-model='number' />
  10.     </div>
  11.   </body>
  12.   <script src="./vue.js"></script>
  13.   <script type="text/javascript">
  14.     var vm = new Vue({
  15.       el: '#app',
  16.       data: {
  17.         number: 1
  18.       },
  19.       beforeCreate: function() {
  20.         console.log('beforeCreate', this.number);
  21.       },
  22.       created: function() {
  23.         console.log('created', this.number);
  24.       },
  25.       beforeMount: function() {
  26.         console.log('beforeMount:', this.number)
  27.       },
  28.       mouted: function() {
  29.         console.log('mouted', this.number);
  30.       },
  31.       beforeUpdate: function() {
  32.         console.log('beforeUpdate', this.number);
  33.       },
  34.       updated: function() {
  35.         console.log('updated', this.number);
  36.       },
  37.       beforeDestroy: function() {
  38.         console.log('销毁前.....');
  39.       },
  40.       destroyed: function() {
  41.         console.log('已销毁.....');
  42.       }
  43.     });
  44.     Vue.nextTick(function () {
  45.       // DOM 更新了
  46.       console.log(1111);  // 打印出 1111
  47.     })
  48.   </script>
  49. </html>

我们在浏览器控制台看到，第一次页面加载后，打印信息如下：

beforeCreate undefined
created 1
beforeMount: 1
1111

从上面可以看到，页面第一次加载后，触发了 beforeCreate，created，beforeMount等生命周期函数，当然 mouted 生命周期在加载完后dom操作也会被触发的。
beforeCreate 在实例创建之前 是获取不到值的，上面页面加载完成后，可以看出值为undefined；
当我们在控制台 console.log('mounted: ', document.getElementsByTagName('p')[0]) DOM 渲染在 mounted 中已经完成。
我们接着在input输入框 在输入一个1字，控制台打印出如下信息：
beforeUpdate 11
updated 11

可以看到当内容被更新的时候 调用了 beforeUpdate 和 updated 等生命周期函数。
当我继续在控制台中 调用如下销毁方法：vm.$destroy() 后，在控制台会打印如下信息：
销毁前.....
已销毁.....
说明这时候会自动调用了 beforeDestroy 和 destroyed 等生命周期函数。为此整个生命周期过程就是这样的。

Vue.nextTick([callback, context]): 在DOM更新循环结束之后执行的延迟回调函数，在修改数据之后立即使用这个方法，获取更新后的DOM元素。

  1. Vue.nextTick(function () {
  2.   // DOM 更新了
  3.   console.log(1111);  // 打印出 1111
  4. })

Vue2 第四天学习(Vue的生命周期)的更多相关文章

  1. 第四十篇:Vue的生命周期(一)

    好家伙,军训结束了,回归 Vue实例的生命周期 1.什么是生命周期? 从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期. 2.什么是生命周期钩子? 生命周期函数的别称 ...

  2. 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

  4. vue学习指南：第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  5. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  6. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  7. Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  8. vue 学习一 组件生命周期

    先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...

  9. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

随机推荐

  1. Java8的lambda表达式和Stream API

    一直在用JDK8 ,却从未用过Stream,为了对数组或集合进行一些排序.过滤或数据处理,只会写for循环或者foreach,这就是我曾经的一个写照. 刚开始写写是打基础,但写的多了,各种乏味,非过来 ...

  2. elasticsearch6.7 05. Document APIs（4）Delete API

    3.Delete API delete API 可以让你删除一个特定id的文档,下面例子删除twitter索引中_doc类型.id为1的文档: DELETE /twitter/_doc/1 返回结果: ...

  3. 在CentOS下的docker容器中部署spring boot应用的两种方式

    我们通常在 windows 环境下开发 Java,而通常是部署在Linux的服务器中,而CentOS通常是大多数企业的首选,基于Docker的虚拟化容器技术,多数Java应用选择这种方式部署服务.本文 ...

  4. Linux Shell脚本编程case条件语句

    1,判断一个数字是否则在1,2,3之中. #!/bin/bash read -p "pls input a number:" n case "$n" in ) ...

  5. 大型Vuex应用程序的目录结构

    译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...

  6. React自己写的一个地图小组件

    由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...

  7. 【代码笔记】Web-利用Dreamweaver实现form

    一,打开Dreamweaver---->File---New---->如下图所示.选择HTML,点击OK. 二,会出现如下图所示界面.把光标放到Body处. 三,将上面的栏切换到Desig ...

  8. 1145.cn 百度MIP适配实例

    MIP,全称Mobile Instant Pages(移动端即时页面),是百度推出的一套移动端网页开放技术标准.网站移动端页面统计MIP改造,能实现页面缓存,从而达到移动网页加速效果. 百度官方已经明 ...

  9. Linux LB--负载均衡和高可靠

    1.负载均衡典型应用场景,外网.内网.私网公共服务. 典型场景: (1)用户通过公网访问数据中心的ftp.web.https服务器. (2) 在数据中心内部东西向访问其他服务时,例如,访问其他虚拟机. ...

  10. How to deploy kotlin in androidstudio?

    Kotlin is a good language,more playable than Java.So how do we deploy kotlin? First,install the kotl ...