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 匿名调用实现代码
Jun 19 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
js 作用域和变量详解
Feb 16 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 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获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
通用自荐信范文
2014/03/14 职场文书
文明村镇申报材料
2014/05/06 职场文书
志愿者事迹材料
2014/12/26 职场文书
运动会200米广播稿
2015/08/19 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书