Vue2 第四天学习(Vue的生命周期)
阅读目录
1.理解VUE---混合
在了解Vue生命周期之前，我们先来学习Vue中的混合吧；
为什么需要使用混合？
假如当我们开发时候，a.js和b.js都有公用的代码的时候，我们可以把他们抽取出来，在a.js或b.js的需要的时候可以引用进来即可，这可以简单的理解为混合。
混合对象可以包含任意组件选项，所有混合对象的选项将被混入该组件本身的选项。什么意思呢？可以简单的理解为该组件引入该混合对象的时候，该组件拥有该混合对象的所有属性和方法。
看下如下demo代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
</head>
<body>
<div id='app'>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 定义一个混合对象
var myMixin = {
template: '<div>hello world</div>',
methods: {
hello: function() {
console.log('hello');
},
say: function() {
console.log('I am longen');
}
}
};
// 定义一个组件 使用上面的混合对象
var Component = Vue.extend({
mixins: [myMixin],
methods: {
list: function() {
console.log('lists');
},
say: function() {
console.log('I am kongzhi');
}
}
});
// 实例化
var Vm = new Component({
el: '#app'
});
Vm.hello(); // 打印出 hello
Vm.list(); // 打印 lists
Vm.say(); // 打印 I am kongzhi
</script>
</html>
上面代码可以看到 当实例化对象本身和混合对象有相同的函数名的时候，会先调用自身的函数，如果自身的函数不存在，才会
寻找混合对象的函数名。
2.Vue实例化选项
在实例化vue时，需要传入一个选项对象，它可以包含数据(data), 模板(template), 挂载元素(el), 方法(methods), 生命周期构造选项等。
2-1 data
Vue实例的数据都保存在data对象中，Vue将会递归将data的属性转换为getter/setter, 让data数据能够响应变化。
比如如下代码：
var data = {
a: 1
};
var vm = new Vue({
data: data
});
console.log(vm);
console.log(vm.a === data.a); // true
console.log(vm.$data === data); // true
2-2 computed
该属性可以理解为计算属性，getter 和 setter的this上下文自动的绑定vue的实例。如下代码：
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
});
console.log(vm.reversedMessage); // olleH
切记：调用属性 只能 vm.reversedMessage, 因为不是调用方法，后面不能加小括号；且后面的function不要使用箭头函数代替，因为this一般都指向vue的实例。
2-3 methods
从字面量理解可以认为 是vue的所有方法写在该对象中，可以直接通过vue实例访问这些方法。方法中this指向vue的实例。如下代码：
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
console.log(vm.reversedMessage()) // -> 'olleH'
从上面的 methods 和 computed看 他们两者都可以做同样的事情，那么他们的区别是？computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对
属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。
2-4 watch
可以理解为 观察某个值发生变化的回调函数。值也可以是方法名，或者包含选项的对象，Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。
如下代码：
var vm = new Vue({
data: {
a: 11,
b: 22,
c: 33
},
watch: {
// 监控a变量变化的时候，会自动执行该函数。
a: function(newVal, oldVal) {
console.log(newVal); // 打印 12
console.log(oldVal); // 打印 11
}
}
});
vm.a = 12; // 改变a的值，会自动调用watch对象中的a函数，返回新值 和 旧值。
3.Vue实例化的生命周期
实例化生命周期 从开始创建，初始化数据，编译模板，挂载Dom->渲染， 更新->重新渲染，销毁等。
beforeCreate: function() {} // 在实例初始化之后， 数据观测 和 event/watcher 事件配置之前被调用。
created: function() {} // 实例已经创建完成之后被调用。实例已完成如： 数据观测，属性和方法的计算，watch/event事件回调。
beforeMount: function() {} // 在挂载开始之前被调用， 该函数在服务器端渲染期间不会被调用。
mounted: function() {} // el被新创建的 vm.$el替换，并挂载到实例上去之后调用该函数，在该函数内可以获取元素。
render: function() {} // 页面被渲染时会调用该函数。该函数在mounted之前会被调用。
beforeUpdate: function(){} // 数据更新时调用，发生在虚拟Dom重新渲染之前。该函数在服务器端渲染期间不会被调用。
updated: function() {} // 由于数据更改导致虚拟DOM重新被渲染会调用。在被渲染后调用该函数。可以或许新的dom元素。该函数在服务器端渲染期间不会被调用。
activated: function() {} // keep-alive组件激活时调用 该函数在服务器端渲染期间不会被调用。
deactivated: function(){} // keep-alive 组件停用时被调用。该函数在服务器端渲染期间不会被调用。
beforeDestroy: function(){} // 实例销毁之前被调用，实例仍然完全可用 该函数在服务器端渲染期间不会被调用。
destroyed: function() {} // Vue 实例销毁后调用，调用后，Vue实例所有东西都会被解绑定，所有的事件监听器会被移除，所有的实例被销毁。
下面看看代码如下：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
</head>
<body>
<div id='app'>
<p> {{ number }} </p>
<input type='text' v-model='number' />
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
number: 1
},
beforeCreate: function() {
console.log('beforeCreate', this.number);
},
created: function() {
console.log('created', this.number);
},
beforeMount: function() {
console.log('beforeMount:', this.number)
},
mouted: function() {
console.log('mouted', this.number);
},
beforeUpdate: function() {
console.log('beforeUpdate', this.number);
},
updated: function() {
console.log('updated', this.number);
},
beforeDestroy: function() {
console.log('销毁前.....');
},
destroyed: function() {
console.log('已销毁.....');
}
});
Vue.nextTick(function () {
// DOM 更新了
console.log(1111); // 打印出 1111
})
</script>
</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元素。
Vue.nextTick(function () {
// DOM 更新了
console.log(1111); // 打印出 1111
})
Vue2 第四天学习(Vue的生命周期)的更多相关文章
- 第四十篇:Vue的生命周期(一)
好家伙,军训结束了,回归 Vue实例的生命周期 1.什么是生命周期? 从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期. 2.什么是生命周期钩子? 生命周期函数的别称 ...
- 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
- vue学习指南：第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- vue 学习一 组件生命周期
先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
随机推荐
- 学Java的18天，今天老师讲构造方法；
上一篇讲到方法的调用和简单的构造方法,今天继续加深,加参数或者该参数: package sklx; public class Car{ //设三个属性 private String 品牌; priva ...
- 设计模式之享元模式（Flyweight）
享元模式顾名思义就是羽量级模式或者蝇级模式,形容体量小的应用,该模式主要的设计目的是为了迎合系统大量相似数据的应用而生,减少用于创建和操作相似的细碎对象所花费的成本.大量的对象会消耗高内存,享元模式给 ...
- JavaScript初学者必看“new”
译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读. 原文: JavaScript For Beginners: the 'new' operator 译者: Fun ...
- tab栏切换案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- Python 函数的作用域
python中的作用域有4种: 名称 介绍 L local,局部作用域,函数中定义的变量: E enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部作用域,但不是全局的: B ...
- javascript:jQuery tablesorter 2.0
https://mottie.github.io/tablesorter/docs/index.html 1.GridView <%@ Page Language="C#" ...
- 获取子元素节点(children,childNodes)
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...
- 网络基础 Windows控制台下Ftp使用简介
Windows控制台下Ftp使用简介 by:授客 QQ:1033553122 测试环境: ftp服务器所在主机ip:172.25.75.2 ftp用户目录:F:\ftp C:\Users\laif ...
- 安卓开发_WebView如何在Fragment中使用
之前学习了如何在activity中使用WebView控件来显示网页. 在我的实际开发中,有需要在Fragment中用到WebView控件的,那么就百度学习了一下 其实很简单,但是当然不是和在Activ ...
- screen mac linux下一种让程序后台运行的方法
1: screen 场景的意思.字面意思就是软件运行在不同场景 (1)创建会话 使用命令“screen -S RunWork”来创建一个screen会话,命令执行之后,就会得到一个新的shell窗口, ...