Vue 生命周期钩子的核心实现

Question

"Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会依次执行对应的钩子方法（发布）"
普通用户传入生命周期钩子，为什么我在写项目的时候没看见哪里有传过生命周期钩子，也没看见哪里订阅过

Answer 1

引自免费微信小程序：皆我百晓生

在Vue.js中，生命周期钩子的实现原理确实是基于发布订阅模式。当开发者编写Vue组件时，无需显式地“传递”或“订阅”生命周期钩子函数，因为这些操作是由Vue框架在内部自动完成的。

Vue在初始化组件实例的过程中，会遍历并执行与当前组件实例生命周期阶段相对应的所有钩子方法。例如，在创建组件实例时，Vue会调用beforeCreate、created等钩子；而在组件挂载到DOM树之前和之后，会触发beforeMount、mounted等钩子。

虽然你在实际编码过程中没有直接看到对生命周期钩子的“订阅”，但实际上当你定义一个Vue组件并在其选项对象（options object）中声明了生命周期钩子函数时，就已经完成了“订阅”过程：

// 在Vue组件中定义生命周期钩子
const MyComponent = {
  data() {
    return { count: 0 };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  // ... 其他生命周期钩子
};

在这个例子中，你定义的beforeCreate和created函数就是所谓的“订阅”。当Vue创建并管理这个组件实例时，它会在适当的时间点“发布”相应的生命周期事件，并调用已经“订阅”的钩子函数。

Vue框架内部对于生命周期钩子的处理和调用机制是封装好的，对开发者来说是透明的，我们只需按照规范定义钩子函数，Vue就会自动正确地执行它们。