Vue2.0源码阅读计划(六)——生命周期

Vue2.0的生命周期：深入浅出的解析

生命的初始：组件的创建

组件的生命旅程始于一个 humble 的开始 - 构造函数的调用。在这个阶段，Vue2.0 赋予了组件实例生命，并欢迎它们进入生命周期，通过调用两个关键的钩子函数：beforeCreate 和 created。就像迎接一个新生命一样，beforeCreate 充当了孕育的准备，而 created 则宣告了组件的正式诞生。

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('Before I am born!')
  },
  created() {
    console.log('I am now a Vue component!')
  }
}

登上舞台：组件的挂载

一旦组件被创造出来，它就需要一个舞台来展示其风采 - 这就是挂载过程。Vue2.0 通过编译组件模板创建虚拟 DOM（VDOM），然后将这个 VDOM 插入到真正的 DOM 中，从而赋予组件一个物理存在。在 mounted 钩子函数中，组件的 DOM 元素已准备就绪，等待我们施展魔法。

mounted() {
  console.log('I am now mounted on the DOM!')
}

变化万千：组件的更新

组件的生命周期中少不了变化的元素 - 数据的更新。当组件的数据发生变化时，Vue2.0 会通过调用 beforeUpdate 和 updated 钩子函数来响应。就像一幅画作的重新着色，beforeUpdate 在调色板准备好后就开始工作，而 updated 则宣告着画作的焕然一新。

watch: {
  message(newValue, oldValue) {
    console.log('My message has changed!')
  }
},
beforeUpdate() {
  console.log('My data is about to change!')
},
updated() {
  console.log('My data has changed!')
}

谢幕时刻：组件的销毁

所有的好戏终有落幕时，组件的生命周期也不例外。当组件不再需要时，Vue2.0 会调用 beforeDestroy 和 destroyed 钩子函数，为组件的谢幕做好准备。就像拆除舞台，beforeDestroy 卸下了组件与 DOM 的关联，而 destroyed 则完成了最后的清理工作，释放了组件占用的资源。

beforeDestroy() {
  console.log('I am about to be destroyed!')
},
destroyed() {
  console.log('I am now destroyed!')
}

常见问题解答

• 生命周期钩子函数的执行顺序是什么？

  钩子函数按照如下顺序执行：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

• 在哪些情况下会调用 beforeUpdate 和 updated 钩子函数？

  当组件的数据发生变化时，会调用这两个钩子函数。

• beforeCreate 和 created 钩子函数有什么区别？

  beforeCreate 在组件实例创建之前执行，而 created 在组件实例创建之后立即执行。

• 挂载和更新过程之间有什么区别？

  挂载是组件第一次插入 DOM 的过程，而更新是在组件数据发生变化时更新 VDOM 和 DOM 的过程。

• 销毁组件时会发生什么？

  当组件销毁时，它将从 DOM 中移除，其实例将被销毁，释放所有占用的资源。