vue 实例的生命周期

96
辉夜乀
0.1 2017.06.08 18:49* 字数 537

vue 实例

var vm = new Vue({
  el:"#app",
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

vue 生成一个实例,实例里面有很多的属性,然后把实例渲染到页面上去;

做个比喻,vue 是一个家族,世世代代每个成员(实例)都要上战场(渲染到DOM上),家族里出来的每个人(实例),都有自己的参数

  • 实例名称: vm
  • 挂载点:el
  • 数据:data
  • 方法:methods
  • 生命周期:下图的函数

生命周期

vue 家族里出来的每个人,从出生到上战场,到死亡,它会经历一系列的过程,如下图所示

image.png

一个人(实例),在它的一生中,会有几个重要的时间节点,每个节点称为声明周期钩子函数,依次是:

  1. beforeCreate:这个实例还没有创造出来,无法获取datamethods,可以理解为,这个人还没生出来。
  2. created:这个实例被创造出来了,可以获取datamethods,可以理解为,这个人已经存在了。
  3. beforeMount:挂载之前,实例刚刚渲染到 DOM 节点上,相关渲染函数刚执行。可以理解为,这个人到兵营去报了个到,其他啥都没干。
  4. mounted :挂载之后,实例的初始数据data在 DOM 上已经渲染完毕,注意:如果是异步的数据,这时候还没渲染。
  5. beforeUpdate :实例的data如果发生变化,beforeUpdate这个时候就是指在变化之前。
  6. updated:实例的data变化完毕,异步数据也全部获取。
  7. beforeDestory:实例销毁前。
  8. destoryed:实例销毁完毕

updated、watch、$nextTick 异同:

相同点,都是数据发生变化后的钩子函数
不同:

  • update:所有数据的所有变化,如果做同一个的业务逻辑处理,在这里;
  • watch:监听具体数据的变化,并做相应处理。
  • $nextTick: 某个数据的某个变化,变化后立即更新DOM;
vue.js 学习之旅