有什么简单的方法可以仅从 JavaScript 生成 "componentDidUpdate()" 生命周期方法吗？

Question

我想从头开始创建自己的 componentDidUpdate() 生命周期方法。 React 是怎么做到的？ Vue.JS 是如何制作自己的生命周期方法的。我尝试研究 Vue.JS 缩小版，但它让我很困惑。如果可以请告诉我，谢谢。类似于下面的内容。

Element.prototype.whenUpdated = function() {
  /*some codes here that runs when the HTML element is updated*/
}

Answer 1

componentDidUpdate 仅在视图框架的上下文中才有可能（并且仅真正有意义），其中元素的状态保存在框架内，并且视图的更改源于对框架的状态。框架状态的更改通过框架方法公开。

这里有一个小例子来说明类似的东西：

// Framework code
class CustomDiv {
  constructor(sel, text) {
    this.container = document.querySelector(sel);
    this.text = text;
    this.update();
  }
  setText(newText) {
    this.text = newText;
    this.update();
  }
  update() {
    this.container.textContent = this.text;
    this.updateCallback?.();
  }
}

// Interact with the framework...
const customDiv = new CustomDiv('.container', 'initial text');
customDiv.updateCallback = () => {
  console.log('updated!');
};
setTimeout(() => {
  customDiv.setText('new text');
}, 1000);

<div class="container"></div>

虽然确实存在 MutationObserver，它可以观察 native 元素的内容和属性等的变化，但这是完全不同的事情。

有什么简单的方法可以仅从 JavaScript 生成 "componentDidUpdate()" 生命周期方法吗？

Is there any easy way of making "componentDidUpdate()" lifeycycle method from ONLY JavaScript?

javascript

methods

lifecycle

reactjs

vue.js