Vue js 的生命周期(看了就懂)(推荐)


Posted in Javascript onMarch 29, 2019

用Vue框架,熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图,详细的给出了vue的生命周期:

Vue js 的生命周期(看了就懂)(推荐)

它可以总共分为8个阶段:

  1. beforeCreate(创建前),
  2. created(创建后),
  3. beforeMount(载入前),
  4. mounted(载入后),
  5. beforeUpdate(更新前),
  6. updated(更新后),
  7. beforeDestroy(销毁前),
  8. destroyed(销毁后)

然后用一个实例的demo 来演示一下具体的效果:

<div id=app>{{a}}</div>
<script>

var myVue = new Vue({          

el: "#app",          

data: {

a: "Vue.js"        

},         

 beforeCreate: function() { 

          console.log("创建前")            

console.log(this.a)            

console.log(this.$el)          

},         

 created: function() {

                console.log("创建之后");            

console.log(this.a)            

console.log(this.$el)          

},         

 beforeMount: function() {            

console.log("mount之前")            

console.log(this.a)            

console.log(this.$el)          

},          

mounted: function() {            

console.log("mount之后")            

console.log(this.a)            

console.log(this.$el)          

},          

beforeUpdate: function() {            

console.log("更新前");            

console.log(this.a)            

console.log(this.$el)          

},          

updated: function() {            

console.log("更新完成");            

console.log(this.a);            

console.log(this.$el)          

},          

beforeDestroy: function() {            

console.log("销毁前");            

console.log(this.a)            

console.log(this.$el)            

console.log(this.$el)          

},          

destroyed: function() {           

console.log("已销毁");          

console.log(this.a)          

console.log(this.$el)          

}   

  });  

</script>

运行后,查看控制台,

得到这个:

Vue js 的生命周期(看了就懂)(推荐)

 Vue js 的生命周期(看了就懂)(推荐)

然后再methods 里面添加一个change方法:

<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>

点击按钮之后出现的是:

Vue js 的生命周期(看了就懂)(推荐)

这就是vue的生命周期,很简单吧。

以上所述是小编给大家介绍的Vue js生命周期详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
浅谈js闭包理解
Mar 28 #Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
详解vue-cli3多环境打包配置
Mar 28 #Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
简单的js表格操作
2016/09/24 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python 排列组合之itertools
2013/03/20 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
党校个人总结
2015/03/04 职场文书
紧急迫降观后感
2015/06/15 职场文书
签约仪式致辞
2015/07/30 职场文书
Python合并多张图片成PDF
2021/06/09 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android