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 = ...
随机推荐
- Placement of class definition and prototype
When I create a function, I can put the code for it after main if I put the prototype above main. Fo ...
- Debian、Ubuntu恢复误删除(或者说重装)的/var/lib/dpkg
在使用ubuntu的使用,有可能会碰到dpkg挂掉,网上的通用解决方法,如果不管用: 1, dpkg 被中断,您必须手工运行 sudo dpkg --configure -a解决此问题 2, sudo ...
- Android ContentProvider数据共享
一.构造一个自己的Provider实现App之间数据共享 1.我们先来了解一下 Uri(统一资源定位符) 定义:每一个Content Provider使用一个公开的URI唯一标示其数据集,Andr ...
- vue项目sql图片动态路径引用问题
最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...
- canvas-2drawRectFun.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Callable接口--有返回值的线程
Callable java5之前是没有返回值的,Java5新增了Callable接口获得线程的返回值,可返回值的任务必须实现Callable接口,类似的,无返回值的任务必须Runnable接口.Cal ...
- python小练习:用户三次登陆, 购物车
2018.12.1 周末练习: 1.用户三次登陆 from random import randint i = 1 while i < 4: num = 0 verify_code = '' w ...
- Bootstrap里的文件分别代表什么意思及其引用方法
关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下: bootstrap/ <!--主目录--> ├── css/ < ...
- Tars --- Hello World
服务端开发 1,创建一个 webapp maven 项目,pom.xml 导入依赖 <dependency> <groupId>com.tencent.tars</gro ...
- (网页)JS实现alert中显示换行的方法
转自脚本之家: 这篇文章主要介绍了JS实现alert中显示换行的方法,实例分析了两种实现alert换行的实现技巧,非常简单实用,需要的朋友可以参考下 本文实例讲述了JS实现alert中显示换行的方法. ...