跟踪已存在的Javascript中Vue.js中的数据更改？

Question

我有一个项目，我一直在努力一段时间，我可能想使用vuejs的一些UI元素。我启动了一个教程，并试图拼凑出一个基本的例子。

我有这样一个基本的JavaScript对象，因此：

var hex = {}; 
hex.turn_phase = 'unit_placement'; 

在我的模板，我有：

var app = new Vue({ 
     el: '#vue-test', 
     data: { 
      message: 'Hello Vue!', 
      turn_phase: hex.turn_phase, 
     }, 
     delimiters: ["<%","%>"], 
     mounted: function() { 
      this.fetch_turn_phase(); 
     }, 
     methods: { 
      fetch_turn_phase: function() { 
       Vue.set(this, 'turn_phase', hex.turn_phase); 
      }, 
     } 
    }); 

这最初呈现模板上的正确turn_phase，但如果我改变hex .turn_phase在浏览器控制台中，模板没有反应。

在这个基本的例子中，我错过了什么吗？

Answer 1

Vue会创建所有data变量，computed属性和从methods返回的值无效。在你的情况下，因为你 正在改变hex，这不是一个vue变量，所以vue不会检测到这个变量的任何变化。但是，如果更改message变量，它将是反射的，并将在模板中进行更改。

Answer 2

看起来你可能会让事情变得不必要的困难。只需通过app访问您的Vue实例？

一定要确保你通过由Vue.js生成的setters。这些被观看并将重新渲染你的组件。

相反，尝试使用

app.turn_phase = 'unit_placement'; 

您可以更好地了解这里，Reactivity