Vue.js，React.js，Angular.js是如何工作的

这是一个来自curiossity的问题。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知道什么时候变量值的变化？如果不是，他们用什么样的魔法知道变量值何时改变？

来源

2017-02-11 durisvk

看这个http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery –

https：//开头开发商.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy – gurghet

@JozefCipa和@gurghet是'object.watch（）'支持在其他浏览器比Mozilla Firefox吗？它也支持NodeJS吗？ – durisvk

有没有什么神奇的，例如使用角度zone.js，我建议你有一个read关于它。

来源

2017-02-11 20:31:34

这个实际上是一个很好的记录库。它支持我最喜欢的TypeScript :)。 – durisvk

-1

知之甚少做出反应 - 它不是真正听JS对象的变化，因为它只能调用组件的render方法，如果shouldComponentUpdate()（默认情况下它使用的组件状态的参考平等）返回true，并检查是否返回VirtualDOM等于真正的DOM。

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

来源

2017-02-11 20:42:41

@Dimitriy Kovalenko这也是'React'有一个'setState（state）'函数，它很容易找出它何时被触发。像'Vue.js'和'Knockout.js'这样的其他框架确实在监听变量的变化。 – durisvk

我要去尝试解释它在很简单的话，一步一步：

做一个简单的HTML页面上的元素<h2>Hi</h2>
在可变开浏览器控制台和存储DOM元素： var h2 = document.getElemntsByTagName('h2')[0];
使其它两个变量第一var obj = {};和第二var text = '';

吨他就是你正在寻找的一部分：

，而不是简单地分配obj.text = text我们声明的getter setter方法对obj.text属性，这样当我们树立新的价值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

来源

2017-02-11 21:15:48 Soorena

Vue.js，React.js，Angular.js是如何工作的

回答

相关问题