vue2.0 组件的生命周期
vue官方文档中给出的vue生命周期的流程图 如下：
生命周期探究
对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>create 和 mounted 相关
咱们在chrome浏览器里打开，F12看console就能发现
beforecreated：el 和 data 并未初始化created:完成了 data 数据的初始化，el没有beforeMount：完成了 el 和 data 初始化mounted：完成挂载另外在标红处，我们能发现el还是 {{message}}，这里就是应用的
Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
update 相关
这里我们在 chrome console里执行以下命令
app.message= 'yes !! I do';下面就能看到data里的值被修改后，将会触发update的操作。
destroy 相关
有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
app.$destroy();
生命周期总结
这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。
beforecreate: 举个栗子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted： 在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
当然，还有更多，继续探索中......
参考文献：
https://segmentfault.com/a/1190000008010666
vue2.0 组件的生命周期的更多相关文章
- vue2.0组件的生命周期
beforeCreate(){ console.log(new Date().getTime()) let data = this.text; console.log('组件创立之前') consol ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM 在本阶段,主要有三个方法: 1 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- Jetpack 架构组件 Lifecycle 生命周期 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Tomcat 8（九）解读Tomcat组件的生命周期(Lifecycle)
Tomcat 8(七)解读Bootstrap介绍过.运行startup.bat.将引发Tomcat一连串组件的启动.事实上这一连串启动是通过组件的生命周期(Lifecycle)实现的 今天来看看Lif ...
- 202-React.Component组件、生命周期
一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...
随机推荐
- SEERC 2018 I - Inversion (Gym - 101964I) DP
Gym - 101964I 题意 有一个数组\(p\),如果满足\(i<j,p_i>p_j\),则\(i,j\)之间就有一条边相连,问存在多少个集合满足集合内的元素互不相连,且集合外的元素 ...
- 【HDOJ6583】Typewriter（SAM，DP）
题意:给定一个由小写字母组成的字符串,每次可以花费p在串后加上任意一个字母,花费q在串后复制一个当前串的子串,问生成字符串的最小花费 n<=2e5,1<=p,q<2^31 思路: S ...
- BZOJ 3687: 简单题(dp+bitset)
传送门 解题思路 设\(f(i)\)表示和为\(i\)时的方案数,那么转移方程为\(f(i)+=f(i-x)\),\(x\)为当前枚举到的数字,这样做是\(O(n\sum a_i)\)的,考虑优化.发 ...
- LintCode之各位相加
题目描述: 我的代码 public class Solution { /* * @param num: a non-negative integer * @return: one digit */ p ...
- The SDK directory '/home/wangju/gitProject/Automation/D:\Android_SDK' does not exist.
执行gradle clean命令报错 gradle clean FAILURE: Build failed with an exception. * What went wrong: A proble ...
- 【转】如何成功安装旧版本火狐，成功安装firebug和firepath插件
原文地址:https://www.cnblogs.com/meimei00/p/10566793.html
- fat32转ntfs ，Win7系统提示对于目标文件系统文件过大解决教程
系统之家 发布时间:18-05-3117:56 很多Win7用户在复制较大的文件时,系统会弹出窗口提示“对于目标文件系统,文件XXX过大”,出现这种情况的原因是FAT32的文件系统不支持复制大于4g的 ...
- Linux下实现MySQL数据库每天定时自动备份
使用MySQL自带的备份工具+ crontab 的方式来实现备份 1.查看磁盘挂载信息(选一个容量合适的) #df -h 2.创建备份目录 为了方便,在/home保存备份文件: cd /home/ga ...
- CF1241 D Sequence Sorting(离散化+DP)
题意: 给定数组a[n],用两种操作: 1.将数组中所有值为x的数移至开头 2.将数组中所有值为x的数移至末尾 问,经过最少多少次操作,能将数组a[n]变为非递减的有序数列? (1<=n< ...
- 【python】 字符串转小写（含汉字等时仍work）
def mylower(str): outstr = ""; strlen = len(str); idx = 0; while idx < strlen: if ord(s ...