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 生命周期函数总结如下:

  beforeCreate    
    在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    此阶段data/methods/el 都不可见
  created 
    实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。
    然而,挂载阶段还没开始,$el 属性目前不可见。
  beforeMount 
    在挂载开始之前被调用:相关的 render 函数首次被调用。
    data和el均已经初始化,但从{{message}}等现象可以看出此时el并没有渲染进数据,el的值为“虚拟”的元素节点
    注意:并且组件中activated 此时激活
  mounted
    el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    此时el渲染数据,当有data中数据变化时触发beforeUpdate,updated生命钩子
  beforeUpdate    
    数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
    此时el中的数据渲染完成,但是页面dom中展示的数据不更新
  updated 
    由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
    此时el中的数据渲染完成,同时页面dom中展示的数据更新了
  beforeDestroy   
    实例销毁之前调用。在这一步,实例仍然完全可用。
    注意:并且组件中deactivated 此时激活
  destroyed   
    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  activated   
    keep-alive 组件激活时调用。(beforeMount :el初始化时候触发)
  deactivated 
    keep-alive 组件停用时调用。(beforeDestroy:vue实例销毁之前触发)
 
 
以上是个人的理解,如果有什么不对的地方可以一起交流

  

Vue 2.0 生命周期-钩子函数理解的更多相关文章

  1. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

  2. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  3. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  4. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  5. vue学习三:生命周期钩子

    生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...

  6. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  7. 什么是vue生命周期和生命周期钩子函数?

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  8. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  9. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

随机推荐

  1. P2075 [NOIP2012T5]借教室 区间更新+二分查找

    P2075 [NOIP2012T5]借教室 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 noip2012-tg 描述 在大学期间,经常需要租借教室.大到院 ...

  2. dubbo在项目中的应用

    关于dubbo的使用,我们举个简单例子: 存在2个系统,A系统和B系统,A系统调用B系统的接口获取数据,用于查询用户列表. 在上一篇博文介绍了dubbo的创建,zookeeper的创建完成后,我们可以 ...

  3. HDU 3277 最大流+二分

    Marriage Match III Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. POJ1015 DP

    Jury Compromise Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28927   Accepted: 7676 ...

  5. HDU2688 树状数组(逆序数)

    Rotate Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  6. 如何生成Java Key以及sign一个jar

    1. 生成Java Key: keytool -genkey -alias mydomain -keyalg RSA -keystore keystore.jks -keysize mydomain ...

  7. Maven:Non-resolvable parent POM: Failure to find错误

    使用Maven编译项目时遇到如下错误: [ERROR] The project dfjr.generic:dfjr-generic:1.0-SNAPSHOT (F:\workspace\DFJR-PE ...

  8. javaScript 进阶篇

    1.js 数组 创建数组的语法: a. var myarray= new Array(8); myarray[0]=1;等等 b.var myarray = new Array(66,8,47,59, ...

  9. 「6月雅礼集训 2017 Day8」infection

    [题目大意] 有$n$个人,每个人有一个初始位置$x_i$和一个速度$v_i$,你需要选择若干个人来感染一个傻逼病毒. 当两个人相遇(可以是正面和背面),傻逼病毒会传染,求经过无限大时间后,传染完所有 ...

  10. Desert King(POJ2728+最优比率生成树+二分)

    题目链接:http://poj.org/problem?id=2728 题目: 题意:求一颗生成树,使得费用与距离的比值最小,其中距离等于两点之间的平面欧拉距离,费用为z坐标之差. 思路: 由上图我们 ...