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 ...
随机推荐
- mybaties实体的 Mapper.xml文件中自定义sql时模糊查询的写法
<select id=selectByNameLike" parameterType="string" resultMap="BaseResultMap ...
- 将微服务注册到Eureka Server
一.微服务程序编写 1.在已写好的微服务程序中添加pom依赖: <dependency> <groupId>org.springframework.cloud</grou ...
- 自动清理N天前的二进制日志
这里以自动清理5天前的二进制日志为例(做了同步或依赖于二进制日志备份的请慎用): 以root身份登录数据库,执行以下命令: ; 首次设置expire_logs_days参数后需要执行flush log ...
- Codeforces Round #532 (Div. 2)：F. Ivan and Burgers（贪心+异或基）
F. Ivan and Burgers 题目链接:https://codeforces.com/contest/1100/problem/F 题意: 给出n个数,然后有多个询问,每次回答询问所给出的区 ...
- POJ1904:King's Quest（强连通+思维）
King's Quest Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 10352 Accepted: 3815 题目 ...
- 基于jQuery UI的调色板插件推荐colorpicker
1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化 引入js文件 & ...
- Linux下find命令及其参数的使用
find命令原理:从指定的起始目录开始,递归地搜索其各个子目录,查找满足寻找条件的文件,并可以对其进行相关的操作. 格式:find [查找目录] [参数] [匹配模型] 多参数格式:find [查找目 ...
- [LeetCode] 21. Merge Two Sorted Lists ☆
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- MyBatis框架的使用及源码分析(七) MapperProxy，MapperProxyFactory
从上文<MyBatis框架中Mapper映射配置的使用及原理解析(六) MapperRegistry> 中我们知道DefaultSqlSession的getMapper方法,最后是通过Ma ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...