Javascript Vue.js、React.js和Angular.js实际上是如何工作的

这是一个来自好奇的问题

问题是:

让我解释一下，这些客户端框架是如何工作的

我使用javascript已经5年多了。我不明白一件事。他们如何知道变量（例如

title

）的变量值何时更改

我会这样做：

function onTitleChange(title) { //do some stuff }
let title = "This is some title"
let lastTitle = title;
setInterval(() => {
    if(lastTitle !== title) {
        onTitleChange(title);
        lastTitle = title
    }
}, 10);

---

他们都是这样工作的吗？Vue.js就是这样知道变量值何时更改的吗？如果没有，他们用什么样的魔法来知道变量值何时发生变化？？？

没有魔法，例如Angular，我建议你对此有一点了解。

关于React的内容很少-它实际上不会监听js对象的变化，因为它只调用组件的方法，如果

shouldComponentUpdate（）

（默认使用组件状态的引用相等）返回

true

，并检查返回的

VirtualDOM

是否等于实际DOM

---

因为它-它比Angular快得多，Angular使用许多监听器和等式检查器来观看更新。

我将尝试用非常简单的词一步一步地解释它：

在一个简单的HTML页面上创建一个

Hi

元素

打开浏览器控制台并将DOM元素存储在变量中：

var h2=document.getElemntsByTagName（'h2'）[0]

先做另外两个变量

var obj={}和第二个
var text=''

这是您正在寻找的零件：

我们声明getter setter的for

obj.text

属性，而不是简单地分配

obj.text=text

，这样每当我们将新值设置为

obj.text

时，相应的DOM元素也会改变

Object.defineProperty(obj, 'text', {
    get: function () {
        return text;
    },
    set: function (newvalue) {
        text = newvalue;
        h2.innerHTML = text;
    }
});

现在继续并更改obj.text值：

obj.text=“你好”

有关更多信息，请查看此

---

查看@JozefCipa和@gurghet上的所有代码：

除mozilla firefox外，其他浏览器是否支持

object.watch（）

？NodeJS也支持它吗？@durisvk恐怕只有Gecko浏览器才支持

object.watch（）

。但在NodeJS中，你可以很好地使用它，它主要是由观察者完成的，可观察的模式，检查一下这个要点，这实际上是一个有很好文档记录的库。它还支持我最喜欢的打字脚本：）。@dimitry Kovalenko它还有一个

React

功能，可以很容易地找到它的启动时间。其他框架，如

Vue.js

和

Knockout.js

确实会监听变量的变化。