Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到，所以闲下来整理了下，直接复制下面的实例运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components msg="hello" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script>
var child = {
template: '<div>from child: {{msg}}</div>',
props: ['msg'],
data: function () {
return {
childMsg: 'child'
};
},
deactivated: function () {
console.log('component deactivated====1!');
},
activated: function () {
console.log('component activated====2');
}
};
var app = new Vue({
el: '#app',
data: function () {
return {
message: 'father',
show: true
};
},
methods:{
MethodTest:function(){
console.log("函数被调用")
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(state);
// console.log(this.MethodTest());
},
created: function () {
console.group('created 创建完毕状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(state);
this.MethodTest()
},
beforeMount: function () {
console.group('beforeMount 挂载前状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
},
mounted: function () {
console.group('mounted 挂载结束状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
},
updated: function () {
console.group('updated 更新完成状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
},
destroyed: function () {
console.group('destroyed 销毁完成状态');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message,
'MethodTest':this.MethodTest
}
console.log(this.$el);
console.log(state);
this.MethodTest()
},
components: {
'my-components': child
}
});
</script>
</html>
查看控制台进行调试：
1. app.show = false;
修改了data的值，所以会触发beforeUpdate和updated钩子
2. app.$destroy()
我们发现实例依然存在，但是此时变化已经发生在了其他地方，根据官方文档描述：Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
可以在进行测试：app.message = "销毁了"测试，发现已经销毁
3. app.message = '注意页面展示dom是否被更新'
beforeUpdate 与 updated console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); 看变化；
beforeUpdate和updated触发时，el中的数据都已经渲染完成，但根据beforeUpdate == "father"而updated == "注意页面展示dom是否被更新"可知，只有updated钩子被调用时候，组件dom才被更新。
根据官方文档和例子测试对vue 2.0 生命周期函数总结如下：
Vue 2.0 生命周期-钩子函数理解的更多相关文章
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- 什么是vue生命周期和生命周期钩子函数？
原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
随机推荐
- P2075 [NOIP2012T5]借教室 区间更新+二分查找
P2075 [NOIP2012T5]借教室 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 noip2012-tg 描述 在大学期间,经常需要租借教室.大到院 ...
- dubbo在项目中的应用
关于dubbo的使用,我们举个简单例子: 存在2个系统,A系统和B系统,A系统调用B系统的接口获取数据,用于查询用户列表. 在上一篇博文介绍了dubbo的创建,zookeeper的创建完成后,我们可以 ...
- HDU 3277 最大流+二分
Marriage Match III Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- POJ1015 DP
Jury Compromise Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28927 Accepted: 7676 ...
- HDU2688 树状数组（逆序数）
Rotate Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 如何生成Java Key以及sign一个jar
1. 生成Java Key: keytool -genkey -alias mydomain -keyalg RSA -keystore keystore.jks -keysize mydomain ...
- Maven：Non-resolvable parent POM: Failure to find错误
使用Maven编译项目时遇到如下错误: [ERROR] The project dfjr.generic:dfjr-generic:1.0-SNAPSHOT (F:\workspace\DFJR-PE ...
- javaScript 进阶篇
1.js 数组 创建数组的语法: a. var myarray= new Array(8); myarray[0]=1;等等 b.var myarray = new Array(66,8,47,59, ...
- 「6月雅礼集训 2017 Day8」infection
[题目大意] 有$n$个人,每个人有一个初始位置$x_i$和一个速度$v_i$,你需要选择若干个人来感染一个傻逼病毒. 当两个人相遇(可以是正面和背面),傻逼病毒会传染,求经过无限大时间后,传染完所有 ...
- Desert King(POJ2728+最优比率生成树+二分）
题目链接:http://poj.org/problem?id=2728 题目: 题意:求一颗生成树,使得费用与距离的比值最小,其中距离等于两点之间的平面欧拉距离,费用为z坐标之差. 思路: 由上图我们 ...