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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php批量删除操作代码分享
2017/02/26 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
某公司部分笔试题
2013/11/05 面试题
农场厂长岗位职责
2013/12/28 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
法人委托书范本格式
2014/09/15 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android