vue.js - 为什么一个 Vue 实例会更新数据而另一个 View 实例不会？

Question

我是第一次使用 Vue，我很困惑为什么我的一个 Vue 对象会在数据更改时不断更新，而另一个 Vue 对象不会。

我有一个像这样的 JavaScript 模块，基本上只保存数据:

var MyModule = (function(){

    const info = {
        requestCount: 20,
        arrayOfItems: []
    }

    return info;
})();

我有这个 html:

<span id='requestCounter' class='badge'>{{count}}</span>

<table id='vueTable'><tr v-for="item in items"><td>{{item.description}}</td></tr></table>

最后，我有这个 JavaScript 文件来做所有事情:

window.onload = function(){
    var mainTable = new Vue({
        el: '#vueTable',
        data: {
            items: MyModule.arrayOfItems
        }
    });

    var requestCounterVue = new Vue({
        el: '#requestCounter',
        data: {
            count: MyModule.requestCount
        }
    });
}

在第一次运行时，一切都按预期进行。更改 MyModule.arrayOfItems 可以正常工作，表格会根据数组中的内容进行更新。但是，更改 MyModule.requestCount 不会执行任何操作。谁能告诉我我在这里做错了什么？

(注意，我的示例经过简化是为了让我的问题更简单)

Answer 1

您正在从 MyModule 初始化 Vue 对象中的数据。这不会使 MyModule 成为合适的存储或 Controller 。奇怪的行为不是requestCount没有反应，但是arrayOfItems

数组如此行为的原因是对象是通过引用传递的，因此当您初始化 items 时, Vue 获取实际的数组对象并在其上施展魔法。实际上，MyModule 为您的 Vue 数据提供了一个外部句柄。

requestCount , 另一方面, 是一个简单的值, 不是对象, 所以它是按值传递的, MyModule 中的成员和 requestCounterVue 中的数据项之间绝对没有关系.