Vue2.0 生命周期钩子函数:

<template>

  <div id='app'>

    {{message}} 

  </div>

</template>

var app = new Vue({

  el: '#app',

  data: {

    message: 'hello vue'

  },

  生命周期钩子函数: function() {

    console.log(this.$el);

    console.log(this.$data);

    console.log(this.message);

  }

})

主要可以通过测试查看 vue 对象的 $el, $data 两个状态值,来确定当前的钩子函数所做的事情

  beforeCreate: el 和 data 并未初始化,可以在这加个loading事件

  created: 完成了 data 数据的初始化,el没有,在这结束loading,还做一些初始化,实现函数自执行

    注意:created之后this指针便执行了vue实例

  beforeMount: 完成了 el 和 data 初始化,挂载前此时只是创建了虚拟DOM,页面中真实DOM元素上还是占位符

  mounted: 完成挂载,在这发起后端请求,拿回数据,配合路由钩子做一些事情

以上生命周期函数全部执行完成后,页面渲染完成

此后当this.$data对象中的某个属性值发生改变时,将会触发beforeUpdate和updated两个函数对DOM进行更新,页面重新渲染完成

app.message = hello world

  beforeUpdate:

  updated:

当调用 app.$destroy() 函数之后,会触发beforeDestroy 和 destroyed 两个函数,

  beforeDestroy: 此时vue实例还能正常使用,可做如下判断:你确认删除XX吗?

  destroyed: vue实例被删除,清空相关内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body> <div id="app">{{message}}</div>
<script src="./lib/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
created: function () {
console.group('created 创建完毕状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
mounted: function () {
console.group('mounted 挂载结束状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
updated: function () {
console.group('updated 更新完成状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
// this.message = '世界你好'
// console.log(this.$el)
// console.log(this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
// this.message = 'Vue的世界你好'
// console.log(this.$el)
// console.log(this.message)
}
})
</script>
</body>
</html>

打开控制台:

将 beforeDestroy 中的注释代码打开,如下两图 图2 图3 所示

图2

图3

将 destroyed 中的注释代码打开,如下两图 图4 图5 所示

图4

图5

表示对后两种显现不是很理解,以后待补充。。。

vue2.0 生命周期 简析的更多相关文章

  1. Vue2.0生命周期和钩子函数的一些理解

    转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...

  2. Vue2.0 —生命周期和钩子函数

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

  3. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  4. Vue2.0 - 生命周期

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  5. vue2.0生命周期

    https://www.cnblogs.com/goloving/p/8616989.html(copy )

  6. vue2.0生命周期详解

    首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...

  7. 02Vue2.0+生命周期

    Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...

  8. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  9. vue2.x生命周期

    vue2.x生命周期 1. beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. 2. created 实例已经创建 ...

随机推荐

  1. FreeRTOS-06任务运行时间信息统计

    根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 * 1. 要使用vTaskGetRunTimeStats()函数,需满足以下条件: * ...

  2. Ubuntu系统下移动宽带自动启用设置

    对于需要自动移动联网的Ubuntu系统(安装了4G移动手机卡的),步骤如下: . 在终端编辑自启动文件:sudo gedit /etc/rc.local 2. 在最后一句exit 0的上⾯面加上如下指 ...

  3. 解决GitHub下载很慢的问题

    此方法参照 github下载慢,轻松提速教程 1.获取github的IP地址.访问:https://www.ipaddress.com/ 网址依次获取以下三个网址的IP github.com gith ...

  4. (转)MySQL- 5.7 sys schema笔记,mysql-schema

    原文:http://www.bkjia.com/Mysql/1222405.html http://www.ywnds.com/?p=5045 performance_schema提供监控策略及大量监 ...

  5. 转 shell中$(( )) 与 $( ) 还有${ }的区别

    原文 http://blog.zol.com.cn/2322/article_2321763.html $( ) 与 ` ` (反引号)在 bash shell 中,$( ) 与 ` ` (反引号) ...

  6. execution(* *..BookManager.save(..))的解读

    execution(* *..BookManager.save(..))的解读: 第一颗* 代表ret-type-pattern 返回值可任意, *..BookManager 代表任意Pacakge里 ...

  7. React.js 小书 Lesson25 - 实战分析:评论功能(四)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  8. [PY3]——内置数据结构(8)——解构与封装

    ### 解构的理解与用法 ### 解构是python很有特色的一个功能,被很多语言借鉴(例如ES6) # 元素按照顺序赋值给变量 In [31]: lst=list(range(5)) In [32] ...

  9. Codeforces 156B Suspects——————【逻辑判断】

    Suspects Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  10. Go的接口总结

    一.什么是接口 接口类型是一种抽象的类型,它描述了一系列方法的集合. 接口约定:接口类型中定义的方法即为约定,若一个具体类型实现了所有这些方法,则该类型就满足该接口的约定,或者说它是这个接口类型的实例 ...