vue生命周期实现
Vue 生命周期实现
Vue 的生命周期钩子函数是 Vue 实例在创建、挂载、更新和销毁过程中自动调用的函数。以下是 Vue 生命周期的核心实现方式：
初始化阶段
在 Vue 实例初始化时，会调用 _init 方法，该方法内部会依次触发以下生命周期钩子：
beforeCreate：实例刚创建，数据观测和事件配置尚未完成。created：实例创建完成，数据观测和事件配置已完成，但 DOM 还未挂载。
function Vue(options) {
this._init(options);
}
Vue.prototype._init = function(options) {
// 合并配置
const vm = this;
vm.$options = mergeOptions(options);
// 触发 beforeCreate 钩子
callHook(vm, 'beforeCreate');
// 初始化数据观测
initState(vm);
// 触发 created 钩子
callHook(vm, 'created');
// 如果有 el 选项，自动调用 $mount
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};挂载阶段
挂载阶段通过 $mount 方法实现，涉及以下钩子：
beforeMount：模板编译完成，但尚未挂载到 DOM。mounted：实例挂载到 DOM 后触发。
Vue.prototype.$mount = function(el) {
const vm = this;
el = document.querySelector(el);
// 触发 beforeMount 钩子
callHook(vm, 'beforeMount');
// 编译模板并生成渲染函数
const updateComponent = () => {
vm._update(vm._render());
};
// 创建 Watcher 实例（渲染 Watcher）
new Watcher(vm, updateComponent, () => {
// 触发 mounted 钩子
callHook(vm, 'mounted');
});
};更新阶段
数据变化时触发更新，涉及以下钩子：
beforeUpdate：数据变化后，虚拟 DOM 重新渲染之前触发。updated：虚拟 DOM 重新渲染并应用到 DOM 后触发。
// Watcher 的更新逻辑
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.getter = expOrFn;
this.cb = cb;
this.value = this.get();
}
get() {
pushTarget(this);
const value = this.getter.call(this.vm);
popTarget();
return value;
}
update() {
// 触发 beforeUpdate 钩子
callHook(this.vm, 'beforeUpdate');
// 重新渲染
this.run();
// 触发 updated 钩子
callHook(this.vm, 'updated');
}
run() {
const value = this.get();
if (value !== this.value) {
this.cb.call(this.vm, value, this.value);
}
}
}销毁阶段
调用 $destroy 方法时触发以下钩子：
beforeDestroy：实例销毁前触发，此时实例仍完全可用。destroyed：实例销毁后触发，所有绑定和监听器被移除。
Vue.prototype.$destroy = function() {
const vm = this;
// 触发 beforeDestroy 钩子
callHook(vm, 'beforeDestroy');
// 移除所有 Watcher
vm._watchers.forEach(watcher => watcher.teardown());
// 移除所有事件监听器
vm.$off();
// 触发 destroyed 钩子
callHook(vm, 'destroyed');
};辅助函数
生命周期钩子的调用通过 callHook 函数实现：
function callHook(vm, hook) {
const handlers = vm.$options[hook];
if (handlers) {
handlers.forEach(handler => handler.call(vm));
}
}关键点
- 生命周期钩子通过合并选项后存储在
vm.$options中。 - 钩子调用时机与 Vue 实例的关键操作（如数据初始化、挂载、更新、销毁）紧密绑定。
- 异步操作（如
mounted）通过 Watcher 的回调实现。
