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 ...
随机推荐
- [C#] 小记 new 和 override 关键字
C#要想实现函数的override,要求和C++一样,父类的函数必须用virtual关键字注明,随后在子类中用override关键字表明重写的函数. 子类同名函数定义时,如果什么都不写,或者使用new ...
- js的数据类型--数字
近期做一些项目的时候发现,自己的js基础还是不够扎实,再看一遍犀牛书,加深自己的理解和印象.所以从这篇文章开始,后面都是关于原生js的一些内容. 这篇文章,我们具体介绍一下js的数据类型其中一种. j ...
- tortoise svn冲突解决
Tortoiese svn 冲突解决 当文件被别人修改并提交到SVN服务器后,如果自己本地的文件没有被更新为最新的版本,而且已经做了修改,这时候提交将会被成功,系统会提示你的版本已经过期,并要求你先进 ...
- 这个随笔用用来放一些好的思想和思考方式（暂时secret）
一: 给你一个只有4和7的数字,求这是第几个幸运数字? 思路: 我们把4映射成0,7映射成1,然后就如下枚举:0,1,00,01,10,11.因为是映射的,所以可以前导0,然后我们就会知道给出的那个数 ...
- jsp03( javabeans)
1.javabean简介 Javabeans就是符合某种特定规范Java类.使用Javabeans的好处是[解决代码的重复编写],减少代码冗余,功能区分明确,提高代码的维护性. 2.javabean的 ...
- CSS 竖线颜色渐变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 【HNOI】 攻城略池 tree-dp
[题目大意] 给定一棵树,边有边权,每个节点有一些兵,现在叶子节点在0时刻被占领,并且任意节点在x被占领,那么从x+1开始,每单位时间产生一个兵,兵会顺着父亲节点一直走到根(1),其中每经过一个节点, ...
- csc_滤镜filter和实现透明的两种方式
有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contras ...
- Centos修改镜像为国内的阿里云源或者163源等国内源
阿里安装软件镜像源 阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ 第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/Ce ...
- ie8下trim失效
1.ie8下使用trim失效 trim可以除去字符串两侧的空白字符,但ie8并不支持 2.解决方案 String.prototype.trim = function () { return this ...