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处理；

转载于:https://www.cnblogs.com/lhl66/p/8974306.html

vue2.0组件生命周期探讨相关推荐

Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Vue2.0 探索之路——生命周期和钩子函数
vue生命周期简介 Lifecycle hooks 在这里插入代码片生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. ps:下面代码可以 ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Ext js 2.0 Overview(3) 组件生命周期
Component Life Cycle(组件生命周期) In general, the Component architecture in 2.0 will "just work.&quo ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
组件生命周期管理和通信方案
随着移动互联网的快速发展,项目的迭代速度越来越快,需求改变越来越频繁,传统开发方式的工程所面临的一些,如代码耦合严重.维护效率低.开发不够敏捷等问题就凸现了出来.于是越来越多的公司开始推行" ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）
引言 (乾卦九二)<彖>曰:"'见龙在田',德施普也.""见龙在田,利见大人." 在傅佩荣<自我的觉醒>中这样说道,见龙在田:龙出现在地 ...
【vue3 组件生命周期流程功能】13个生命周期详解
内容: 单一组件.父子组件的生命周期. 仅限开发环境下有效的生命周期. 不讲SSR的生命周期:serverPrefetch.也就是只讲客户端的13个生命周期! this的数据:除了`beforeCre ...

vue2.0组件生命周期探讨

vue2.0组件生命周期探讨相关推荐

最新文章

热门文章