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作一个通用向导说明
Aug 30 Javascript
JS的replace方法介绍
Oct 20 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
js实现坦克大战游戏
Feb 24 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数据加密详解
2013/06/18 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python单例模式实例分析
2015/04/08 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python 实现return返回多个值
2019/11/19 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
结构工程研究生求职信
2013/10/13 职场文书
应届护士推荐信
2013/11/16 职场文书
体育专业自荐书
2014/05/29 职场文书
公司口号大全
2014/06/11 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
今日说法观后感
2015/06/08 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers