javascript – Vue.js,React.js,Angular.js如何实际工作

2023年2月23日 151次阅读

这是一个来自curiossity的问题.

问题是：

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

我正在使用javascript超过5年.我不明白一件事.他们如何知道变量(例如标题)变量值何时发生变化？

我会这样做：

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

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

>制作< h2> Hi< / h2>简单的HTML页面上的元素
>打开浏览器控制台并将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获得

点赞