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 = ...
随机推荐
- 【RabbitMQ】4、RabbitMQ几种Exchange 模式
AMQP协议中的核心思想就是生产者和消费者隔离,生产者从不直接将消息发送给队列.生产者通常不知道是否一个消息会被发送到队列中,只是将消息发送到一个交换机.先由Exchange来接收,然后Exchang ...
- 【hibernate】1、Hibernate的一个注解 @Transient
@Transient表示该属性并非一个到数据库表的字段的映射,ORM框架将忽略该属性.如果一个属性并非数据库表的字段映射,就务必将其标示为@Transient,否则,ORM框架默认其注解为@Basic ...
- Thymeleaf学习记录（1）--启动模板及建立Demo
Thymeleaf是什么? Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.相比于JSP,Thymeleaf更简洁,渲染性能更好,维护性更好,它可以XML/XHTML/HTM ...
- 【读书笔记】iOS-如何选择本地化应用
早在2007年发布iPhone的时候 ,苹果并没有一同发布本地化SDK,苹果公司声称不需要本地SDK,鼓励大家使用JavaScript,CSS和HTML开发Web应用.但接下来剧情并没有按照苹果设计的 ...
- IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...
- ADB命令行控制界面开关
以下命令需要root权限: svc命令 这个脚本在/system/bin目录下,这个命令可以用来控制电源管理,wifi开关,数据开关(就是上网流量) svc power stayon [t ...
- Intent调用常见系统组件
// 调用浏览器 Uri webViewUri = Uri.parse("http://blog.csdn.net/zuolongsnail"); Intent intent = ...
- Android basics
只要是Android中的控件,最终都继承自View.
- android.support不统一的问题
今天supprt28遇到的问题,由于28还是预览版,还存在一些bug 都是因为如果程序内出现不同的,support或者其他外部引用库的多个版本,Gradle在进行合并的时候会使用本地持有的,最高版本的 ...
- 第一个Django页面（2）
第一个Django页面 1,进入forum项目:熟悉项目里各种文件的作用 2,配置URL:在urls.py里面添加 [url路径与对应的处理函数] 3,编写处理函数:根据urls.py里添加函数的路径 ...