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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
js正则表达式简单校验方法
Jan 03 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对数组排序代码分享
2014/02/24 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python设计模式之抽象工厂模式
2016/08/25 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
中软国际Java程序员机试题
2012/08/19 面试题
安全目标责任书
2014/07/22 职场文书
高中运动会广播稿
2014/09/16 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
优秀教师单行材料
2014/12/16 职场文书
学校会议通知范文
2015/04/15 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
发票退票证明
2015/06/24 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python