Vue.js $ watch無法正常工作

Question

首先，我有一個Vue JS文件-

export var myVue = new Vue({
    el: '#myApp',
    data: {
       myCoordinates: new Set() // simple integers
    },
    methods: {
        addCoordinates (c) {
            this.myCoordinates.add(c);
        }
    }
}

然后，我還有另一個JS文件，可以導入Vue並進行一些繪圖-

import { myVue } from './my_vue.js';

myVue.addCoordinates(42);

myVue.$watch('myCoordinates', function(newVal, oldVal) {
    console.log(newVal);
    // plot the new coordinates
}, { deep: true });

問題是myVue.$watch無法啟動-我可以看到myCoordinates在Vue開發人員控制台中已正確更新，但是myVue.$watch只是沒有觸發。 而且由於各種限制，我無法將繪圖部件移入myVue因此我無法測試Vue的原生功能。

問題是：在我的情況下可能出了什么問題？

編輯：順便說一句，我正在使用Webpack 4合並兩個JS文件，這會有副作用嗎？

Answer 1

當您更新代碼中顯示的coordinates時，很可能尚未注冊watcher （在調用add函數之后已注冊watcher ）。 與任何類型的事件偵聽器類似，您需要在事件發生之前注冊觀察者/處理程序，以使其觸發。

使用Vue ，您始終可以在創建新的Vue實例時注冊觀察器功能，例如：

export var myVue = new Vue({
    el: '#myApp',
    data: {
       myCoordinates: new Set() // simple integers
    },
    methods: {
        addCoordinates (c) {
            this.myCoordinates.add(c);
        }
    },
    watch: {
        myCoordinates: function(new, old) {
           console.log(new, old);
        }
    } 
}

Answer 2

事實證明，Vue2手表不支持Set。 查看我的下一個問題的答案Vue2手表設置不工作