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 = ...
随机推荐
- 【19】中间者模式（Mediator Pattern）
一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 二. 中介者模式的介绍 2.1 ...
- Redis的五种数据类型的简单介绍和使用
1.准备工作: 1.1在Linux下安装Redis https://www.cnblogs.com/dddyyy/p/9763098.html 1.2启动Redis 先把root/redis的red ...
- cache 访问频率的思考
互联网的项目用户基数很大,有时候瞬间并发量非常大,这个时候对于数据访问来说是个灾难.为了应对这种场景,一般都会大量采用web服务器集群,缓存集群.采用集群后基本上就能解决大量并发的数据访问.当然这个时 ...
- blfs（systemd版本）学习笔记-配置远程访问和管理lfs系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 要实现远程管理和配置lfs系统需要配置以下软件包: 前几页章节脚本的配置:https://www.cnblogs.com/ren ...
- react中这些细节你注意过没有？
react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...
- jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 从输入url到页面展示到底发生了什么
阅读目录 1.输入地址 2.浏览器查找域名的 IP 地址 3.浏览器向 web 服务器发送一个 HTTP 请求 4.服务器的永久重定向响应 5.浏览器跟踪重定向地址 6.服务器处理请求 7.服务器返回 ...
- loadrunner 脚本开发-字符串编码转换
字符串编码转换 by:授客 QQ:1033553122 相关函数 lr_convert_string_encoding函数 功能:字符串编码转换 原型: int lr_convert_string ...
- 输入两个整数n和m，从数列1,2,3，……n中随意取几个数，使其和等于m
题目:编程求解,输入两个整数n和m,从数列1,2,3,……n中随意取几个数,使其和等于m.要求将所有的可能组合列出来. 分析:分治的思想.可以把问题(m,n)拆分(m - n, n -1)和(m, n ...
- Linux regulator framework(1) - 概述【转】
转自蜗窝科技:http://www.wowotech.net/pm_subsystem/regulator_framework_overview.html 1. 前言 Regulator,中文名翻译为 ...