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

【问题标题】：Tracking data changes in Vue.js on a Javascript that already exists?在已经存在的 Javascript 上跟踪 Vue.js 中的数据更改？
【发布时间】：2016-12-31 00:37:39
【问题描述】：

我有一个项目我已经做了一段时间了，我可能想将 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，则模板不会做出反应。

我在这个基本示例中遗漏了什么？

【问题讨论】：

标签： javascript vuejs2 vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

始终确保您通过 Vue.js 生成的设置器。这些被监视并将重新渲染您的组件。

请尝试使用

app.turn_phase = 'unit_placement';

你可以在这里得到更好的理解，Reactivity

【讨论】：