Question

我有一个计算属性 - playerId，它引用了一个没有更新的外部对象。

例如：

var player = require('players');
computed: {
    playerId: function() {
         return player.id
    }
}

如果我在点击事件中运行此调用，则会输出正确的ID。但是当它得到更新时 - 根据它自己计算不会更新。我如何让它工作？或者我不正确地解决这个问题？

Answer 1

Vue.js中的计算属性不会对没有任何反应依赖性的数据产生反应。例如，下面的代码每次都会不更新，因为Date.now()没有被动依赖。此计算值的结果将被缓存，并且它始终返回与第一次返回的值相同的值。

computed: {
  now: function () {
    return Date.now()
  }
}

然后，您可能想知道如何使您的外部对象具有反应性。关键是，你最好将你的对象放入data部分，以便用Vue的内部观察者跟踪它的变化。如果您的计算属性甚至有一个反应依赖项，如引用data或调用method，则每次更新依赖项时都会通知它，并且计算属性返回的内容也将更新。