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 ...
随机推荐
- HDU 6040 Hints of sd0061 —— 2017 Multi-University Training 1
Hints of sd0061 Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others ...
- 一、生成网络表--create Netlist
Orcad Capture原理图篇 一.生成网络表--create Netlist 1.操作: .dsn文件--Tools--create Netlist 出现如下对话框--默认不进行更改--点击确定 ...
- Oracle 11g 的卸载
Oracle 11g 的卸载 停止 oracle 相关的所有服务. 使用 Oracle 自带的 Universal Installer 卸载工具卸载 Oracle. 删除注册表 HKEY/LOCAL_ ...
- iview+vue 表格中添加图片
开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style ...
- 安装php时，configure: error: xml2-config not found. Please check your libxml2 installation
参考文章:http://blog.csdn.net/anljf/article/details/6981247 安装php时的报错configure: error: xml2-config not f ...
- P1001 A+B Problem
下面我们要展示这个题的玄学做法!!!@cjx!!! #include<iostream> #define chen using namespace std; #define jia int ...
- vue中给请求来的数据List ，添加属性false 后，赋值不上问题解决办法
data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...
- Spring学习笔记（12）——aop
先了解AOP的相关术语:1.通知(Advice):通知定义了切面是什么以及何时使用.描述了切面要完成的工作和何时需要执行这个工作.2.连接点(Joinpoint):程序能够应用通知的一个"时 ...
- 怎么更新 WIN10里的SMBv1协议
控制面板 ---启用或关闭Windows功能---打开SMBv1服务:
- perl升级后shutter程序无法运行的修复
这个问题真的很无语,perl升级后一些依赖perl的aur包不能用了,需要rebuild,这样让系统稳定性何在-- 运行shutter错误信息: $ shutter Can't locate Gnom ...