Vue js 的生命周期(看了就懂)

原创 2017年03月03日 18:09:53

用Vue框架,熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图,详细的给出了vue的生命周期:


它可以总共分为8个阶段:

beforeCreate(创建前),

created(创建后),

beforeMount(载入前),

mounted(载入后),

beforeUpdate(更新前),

updated(更新后),

beforeDestroy(销毁前),

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>

运行后,查看控制台,

得到这个:



然后再methods 里面添加一个change方法:

<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>

点击按钮之后出现的是:


这就是vue的生命周期,很简单吧。

vue的生命周期

生命周期 Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过...
  • garyhu1
  • garyhu1
  • 2017-04-21 11:10:39
  • 1103

浅谈Vue的生命周期模型

浅谈Vue的生命周期模型 Vue实例从创建到销毁的过程,就是生命周期。 Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 在Vue的整个生命周期中...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-05-10 21:46:22
  • 2999

关于Vue生命周期的一些理解记录

关于Vue生命周期的一些理解记录今天遇到个问题,大致是这样的:从父组件向子组件传值,第三层数据终端报错undefined,先上测试代码:父组件 import ...
  • qq_32585057
  • qq_32585057
  • 2017-01-04 20:21:49
  • 1153

【vue】生命周期

vue的生命周期我用到的vue中生命周期相关的有:created,mounted,updated,activited,destroyed。 created在页面创建的时候调用,且仅执行一次。此时页面的...
  • Doris_rain
  • Doris_rain
  • 2017-07-27 18:29:20
  • 581

【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图)   (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期   在be...
  • lla520
  • lla520
  • 2017-08-11 17:13:36
  • 1170

Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么...
  • sexy_squirrel
  • sexy_squirrel
  • 2017-03-07 14:49:35
  • 24956

Vue生命周期中mounted和created的区别

一、什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下c...
  • xdnloveme
  • xdnloveme
  • 2017-09-19 21:55:03
  • 11423

Vue实例详解与生命周期

Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页...
  • Sky786905664
  • Sky786905664
  • 2017-06-16 10:45:14
  • 3186

Vue实例生命周期

前面的话   Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生...
  • nicexibeidage
  • nicexibeidage
  • 2018-01-19 18:11:48
  • 47

vue生命周期

一直对vue的生命周期有所疑问,刚看到一个生命周期总结图,总结的特别好,给大家分享下:...
  • call_me_fly
  • call_me_fly
  • 2018-01-04 14:16:54
  • 91
收藏助手
不良信息举报
您举报文章:Vue js 的生命周期(看了就懂)
举报原因:
原因补充:

(最多只允许输入30个字)