vue2.0组件生命周期探讨
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script type="text/javascript" src="vue2.2.js"></script>
</head> <body>
<!--create 和 mounted 相关:
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载 dom元素已经加载到HTML中 destroy 相关: 执行:app.$destroy()
销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。
但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。 生命周期总结:
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容-->
<div id="app">
<input v-model="message" />
<p>{{ message }}</p>
</div> <script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: "生命周期"
},
beforeCreate: function() {
console.group('beforeCreate 创建前状态===============》');
console.log("color:red", "el : " + this.$el); //undefined
console.log("color:red", "data : " + this.$data); //undefined
console.log("color:red", "message: " + this.message) //undefined
},
created: function() {
console.group('created 创建完毕状态===============》');
console.log("color:red", "el : " + this.$el); //undefined
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('beforeMount 挂载前状态===============》');
console.log("color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group('mounted 挂载结束状态===============》');
console.log("color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
updated: function() {
console.group('updated 更新完成状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message)
}
})
</script>
</body> </html>
初始化操作，异步请求的数据渲染适宜在 created() 钩子中
如果对数据更新做统一处理在 updated() 钩子中处理，区分不同数据更新的在 nextTick() 全局api处理；
watch:{} 对具体的某个数据可以做统一处理；简单的数据处理可以用 computed:{}, 复杂的watch处理；
vue2.0组件生命周期探讨的更多相关文章
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿
在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...
- Vue2.0关于生命周期和钩子函数
Vue生命周期简介: Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下: 代码验证: <!DOCTYPE html> <html> <head& ...
- vue2.0 之 生命周期
一.vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络) 二.vue2.x生命周期图和各阶段具体含义 beforecreated:el 和 data 并未初始化 created: ...
- vue2.0的生命周期
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程, 我们称这是Vue的生命周期.通俗说就是Vue实 ...
- Vue2.0 探索之路——生命周期和钩子函数
beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
随机推荐
- hdu 2594 Simpsons’ Hidden Talents（两个串的next数组）
题意:两个字符串s.t,求s和t的最长的相同的前缀和后缀 思路:先求s的next数组,再求t的next数组(即代码中ex数组,此时不是自己与自己匹配,而是与s匹配),最后看ex[len2]即可(len ...
- 最大网络流 EK 算法
网络流是什么类型的问题,看一道题目你就知道了 点击打开链接 . 默认具备图论的基本知识,网络流概念比较多,先看看书熟悉一下那些概念.比较好!一个寄出的网络最大流.EK算法写的. 这是一幅网络,求S ...
- ssl原理及应用
今天学习网络通信,看到使用ssl(Secure Sockets Layer)进行加密,由于对ssl只是有些概念上的了解,对于具体应用原理.过程和如何使用不慎了解,于是学习了一番,总结如下: 1. 为什 ...
- TCP连接、释放及HTTPS连接流程
一.建立连接是三次握手 为什么三次握手?前两次握手为了确认服务端能正常收到客户端的请求并愿意应答,后两次握手是为了确认客户端能正常收到服务端的请求并愿意应答.三次握手可以避免意外建立错误连接而导致浪费 ...
- Linux 系统开机启动项清理
一般情况下,常规用途的 Linux 发行版在开机启动时拉起各种相关服务进程,包括许多你可能无需使用的服务,例如蓝牙bluetooth.Avahi. 调制解调管理器ModemManager.ppp-dn ...
- Binder通信机制介绍
1.Binder通信机制介绍 这篇文章会先对比Binder机制与Linux的通信机制的差别,了解为什么Android会另起炉灶,采用Binder.接着,会根据 Binder的机制,去理解什么是Serv ...
- 【210】通过OleDb读写Excel数据到DataTable
参考:C#通过OLEDB读写Excel2013显示到datagrid控件,修改数据集并更新excel2013 解决:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序.( ...
- 【198】Synergy - 鼠标键盘共享软件
参考:Synergy X64 v1.7.4 官方最新版 参考:Synergy安装方法 功能介绍: 可以将配置局域网的电脑实现同一个鼠标键盘控制两台电脑,效果类似一台电脑使用双屏的效果,键盘会根据鼠标的 ...
- POJ1787 【完全背包+物品计数+路径输出】
题意: 有1,5,10,25四种硬币,给每种硬币的数量和要组合成的价值,求刚好达到价值时用的硬币最多,然后还要输出具体的用的数量 前言: 一开始是偶然看见了kuangbin爷的题解说是完全背包+路径, ...
- Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...