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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
十天学会php(2)
2006/10/09 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python中使用正则表达式的连接符示例代码
2017/10/10 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python实现石头剪刀布游戏
2021/01/20 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
小学生新年寄语
2014/04/03 职场文书
给公司的建议书范文
2014/05/13 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
努力工作保证书
2015/02/28 职场文书
学生病假条范文
2015/08/17 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL