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的生命周期,很简单吧。

Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器

原教程: http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例,并尝试说明的更详细。 (十)Vue实例的生命周期 如图:(我自己翻...
  • qq20004604
  • qq20004604
  • 2016年08月24日 20:41
  • 7394

浅谈Vue的生命周期模型

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

Vue生命周期,手动挂载

1、vue的生命周期: 2、$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中; 假如需要延迟挂载,可以在之后手动调用vm.$...
  • ma6119780
  • ma6119780
  • 2017年04月07日 11:12
  • 2570

Vue.js学习笔记:关于组件挂载

最近学习到Vue.js的组件部分,在看完官方文档之后还是一头雾水,于是自己试验了一下,将试验结果记录下来,以便查阅。...
  • u010889145
  • u010889145
  • 2016年01月29日 12:11
  • 2130

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

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

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

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

Vue, App与我(十)

Vue, App与我(十)前言:订单页面 Big-man最近在书写一个天天特惠的案例,所以对于订单的处理开始有了一些看法和想法,由于管理App的仅仅只有Big-man一个人,所以后台的实现逻辑、前端的...
  • XXJ19950917
  • XXJ19950917
  • 2017年09月09日 16:42
  • 214

vue2.0(新手)第一个坑--do not mount Vue to <body>!!!

这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板 区别一定是:el对应的 一定是一个css选择器,如果还是html 或者body...
  • wmwmdtt
  • wmwmdtt
  • 2016年12月12日 22:07
  • 7410

vue的生命周期

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

Vue入门系列之Vue实例详解与生命周期

 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译...
  • cmdos
  • cmdos
  • 2016年12月25日 21:09
  • 896
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Vue js 的生命周期(看了就懂)
举报原因:
原因补充:

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