vue 实例的生命周期

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：这个实例还没有创造出来，无法获取data、methods，可以理解为，这个人还没生出来。
2. created：这个实例被创造出来了,可以获取data、methods，可以理解为，这个人已经存在了。
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；