vue生命周期核心实现

Question

"Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会依次执行对应的钩子方法（发布）"
请问是普通用户传入的的生命周期钩子吗，怎么传入的呢

Answer 1

m0_58570672 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

是的，普通用户可以通过组件选项的方式将生命周期钩子函数传入。在创建组件实例时，可以通过定义组件选项中的生命周期钩子函数来执行相应的操作。

传入生命周期钩子的方式有以下几种：

1. 在Vue组件的选项属性中直接定义相应的生命周期钩子函数。例如，在组件选项中定义一个created钩子函数，即可在组件创建完成时执行相应的操作。

export default {
  created() {
    console.log('组件创建完成');
  },
};

1. 使用Vue实例的$on方法进行订阅。在组件实例创建之前，可以通过Vue实例的$on方法订阅相应的生命周期钩子函数，并在对应的事件中执行相应的操作。

//main.js
import Vue from 'vue';
import App from './App.vue';

Vue.prototype.$bus = new Vue(); // 创建一个事件总线

new Vue({
  render: h => h(App),
}).$mount('#app');

//App.vue
export default {
  created() {
    this.$bus.$on('created', () => {
      console.log('组件创建完成');
    });
  },
};

1. 使用Vue实例的$on方法进行订阅，但是订阅的是组件选项中未定义的生命周期钩子函数。在组件实例创建之前，可以通过Vue实例的$on方法订阅自定义的生命周期钩子函数，并在对应的事件中执行相应的操作。

//main.js
import Vue from 'vue';
import App from './App.vue';

Vue.prototype.$bus = new Vue(); // 创建一个事件总线

new Vue({
  render: h => h(App),
}).$mount('#app');

//App.vue
export default {
  created() {
    this.$bus.$on('customHook', () => {
      console.log('自定义的生命周期钩子函数');
    });
  },
};

综上所述，用户可以通过组件选项中定义生命周期钩子函数，或通过Vue实例的$on方法订阅生命周期钩子函数来传入生命周期钩子。在创建组件实例的过程中，这些传入的生命周期钩子函数会被依次执行。