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 ...
随机推荐
- angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）
思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...
- 蓝桥杯 最短路 spfa
问题描述 给定一个n个顶点,m条边的有向图(其中某些边权可能为负,但保证没有负环).请你计算从1号点到其他点的最短路(顶点从1到n编号). 输入格式 第一行两个整数n, m. 接下来的m行,每行有三个 ...
- dubbo在项目中的应用
关于dubbo的使用,我们举个简单例子: 存在2个系统,A系统和B系统,A系统调用B系统的接口获取数据,用于查询用户列表. 在上一篇博文介绍了dubbo的创建,zookeeper的创建完成后,我们可以 ...
- stout代码分析之六：Stopwatch
在进行性能测试时,经常需要计算某个函数执行的时长.stout中的Stopwatch类可实现纳秒精度的计时. Stopwatch内部使用timespec记录开始和技术时间. timeval和time ...
- Leetcode 138. 复制带随机指针的链表
1.题目要求 给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 2.解题思路 (1)笔试思路(求速度,拿分数):使用哈希表 /* ...
- Linux下iptables安全配置
Linux下配置IPTables,只开放特定端口,禁用其他网络. *filter :INPUT DROP [0:0] :FORWARD DROP [0:0] :OUTPUT ACCEPT [0:0] ...
- springboot-用logback将日志文件按等级保存到不同文件
springboot-用logback将日志文件按等级保存到不同文件 案例: 例如项目基本包名为com.xxx,将该包下的所有日志按debug.info.warn.error等级分别保存到D:/log ...
- j2ee 项目部署指引
j2ee相关的项目一般是web工程或java application,部署到linux服务器上,本文结合自己的经验.教训,总结下部署的过程. 一.准备阶段 部署前要做的事情: 1.明确自己的产品都包含 ...
- [Luogu 2596] ZJOI2006 书架
[Luogu 2596] ZJOI2006 书架 第一次指针写 FHQ_Treap(省选噩梦数据结构)AC 啦! 省选试机写它,紧张过度失败了. 省选 Day 1 考场写它,写挂了. 省选 Day 1 ...
- jquery字符串序列化方法总结
在jquery中字符串序列化方法包括有param() .serialize() .serializeArray(),在这里对其常用做法进行总结. $.param()方法这是serialize()方法的 ...