Question

这是一种来自城市居民的问题。

问题是：

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

我正在使用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知道的吗？如果没有，他们用什么样的魔法来知道变量值何时发生变化？

Answer 1

我会用非常简单的语言逐步解释它：

在简单的HTML网页上制作<h2>Hi</h2>元素
打开浏览器控制台并将DOM元素存储在变量中： var h2 = document.getElemntsByTagName('h2')[0];
首先制作另外两个变量var obj = {};和第二个var text = '';

这是您正在寻找的部分：

不是简单地指定obj.text = text，而是为obj.text属性声明getter setter，这样每当我们将新值设置为obj.text时，相应的DOM元素也会发生变化。

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

现在继续更改obj.text值：obj.text = "Hello again"

有关详情，请查看此page。

以下所有代码：JSfiddle

Answer 2

没有魔法，Angular例如使用zone.js，我建议你有一个read。

Answer 3

很少关于React - 它实际上并没有监听js对象的更改，因为它只调用组件的<script> let json; function handleJSON(link) { json = JSON.parse(link.import.body.textContent); } window.onload = function() { console.log(json) } </script> <link id="json" rel="import" type="application/json" href="https://gist.githubusercontent.com/guest271314/ffac94353ab16f42160e/raw/aaee70a3e351f6c7bc00178eabb5970a02df87e9/states.json" onload="handleJSON(this)"/>方法，如果render（默认它使用组件状态的引用相等）返回shouldComponentUpdate()，并检查返回true是否等于真实DOM。

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

Vue.js，React.js，Angular.js如何实际工作

3 个答案: