JavaScript 本身并没有所谓的“组件生命周期”——这一概念源于前端框架。但如果你希望将一套通用的初始化、更新与销毁逻辑抽取出来，并在不同组件间复用，原型链这个经典手法反而能派上用场。简单来说，就是模仿 Vue 或 React 的流程，但完全自主实现。
该方案的核心思想是：在基类的原型上预先定义好一组“钩子”，然后让子类通过继承获得这些钩子，并允许子类按需扩展自定义行为。
预先设定一组钩子方法
一切从基础定义开始。在基类的原型上预设四个空方法，它们就是后续被调用的“钩子点”：
- created：实例创建完毕后立即执行（在构造函数运行结束时）。
- mounted：组件挂载到 DOM 上之后触发（当然，需要先实现挂载逻辑）。
- updated：数据发生变更、视图完成刷新后调用。
- destroyed：实例清理之前，理论上用于释放资源。
这些方法一开始都设为空函数，以防子类未实现时直接抛出错误：
Component.prototype.create = function() {};
Component.prototype.mount = function() {};
Component.prototype.update = function() {};
Component.prototype.destroy = function() {};
嵌入流程中，自动触发
如果生命周期钩子全部依赖手动调用，那便失去了意义。真正的玩法是让它们“随波逐流”，嵌入到关键流程里自动执行。例如，在基类的构造函数末尾自动调用 created，在挂载方法里自动触发 mounted：
function Component(options) {
this.options = options || {};
this.data = this.options.data ? this.options.data() : {};
this.created(); // 构造一完，自动触发
}
Component.prototype.mount = function(el) {
this.el = typeof el === 'string' ? document.querySelector(el) : el;
this.render();
this.mounted(); // 挂载完成，自动触发
};
子类可以覆写，还能链接父类
子类若想添加自己的逻辑，完全没问题。只需通过 super 显式调用父类对应的钩子方法，就能保证父类的逻辑不会被跳过：
class MyButton extends Component {
created() {
super.created(); // 先执行基类的逻辑
console.log('MyButton created');
}
mounted() {
super.mounted();
this.el.addEventListener('click', () => this.handleClick());
}
}
这样一来，既复用了基类的初始化结构，子类对具体行为的掌控权也一点没丢。
要让 updated 灵敏响应？搭建观察者模式
想让 updated 真正在数据变化时被触发，光靠手动赋值是不够的。需要搭配一个简易的响应式系统。最直接的办法，就是在 setData 方法中统一管理更新通知：
Component.prototype.setData = function(newData) {
Object.assign(this.data, newData);
this.render();
this.updated(); // 数据变了，视图重绘，触发 updated
};
需要特别强调的是：在实际项目中，切勿图省事直接操作 this.data 来修改数据。一定要统一通过 setData 这条通道，这是确保 updated 钩子能被可靠触发的关键。
