Vue 组件不响应插件数据更改

Question

我正在尝试让组件对 Vue 插件中的数据更改做出反应。为此，当插件被实例化时，它会在其构造函数中实例化一个 Vue 对象，如下所示：

this._vm = new Vue({
  data: {
    obj: null,
    status: false,
  },
  watch: {
    obj(val) {
      console.log('From inside the plugin, "obj" changed:', val);
    }
  }
})

在页面加载时，应用程序检查 localStorage 是否包含 obj 属性的数据。如果是这种情况，如上所示创建 Vue 实例后，将一个对象分配给属性，如下所示：this._vm.obj = {x: 1, y:2, z:3}。这很好用，我在控制台中看到以下内容：

15:55:37.346 Component mounted, "obj": Object { … }
15:55:37.350 From inside the plugin, "obj" changed: Object { … }

我什至可以通过编程方式将 this._vm.obj 重置为 null，控制台会按预期显示反应：

16:11:48.722 From inside the plugin, "obj" changed: null
16:11:48.726 Component watch "status": false
16:11:48.727 Component watch "obj": null

但是，如果在localStorage中没有找到数据，则向服务器发出请求，并使用响应数据更新this._vm.obj。这样做的方法与上面相同（this._vm.obj = {x: 1, y:2, z:3}）。插件中的观察者有反应（From inside the plugin, "obj" changed），但组件没有反应...

如果有人有指点，那就太好了！

一些片段:
组件中的观察者：

watch: {
  '$MyPlugin.status'(val) {
    console.log('Component watch "status":', val)
  },
  '$MyPlugin.obj'(val) {
    console.log('Component watch "obj":', val)
  }
},

插件 class 具有访问数据的 getter：

get status() {
  return this._vm.status || false
}

get obj() {
  return this._vm.obj
}

Answer 1

回答我自己的问题。问题很简单，在某些情况下，我的插件 class 从其构造函数返回了一个无效的承诺——我没想到会产生任何影响。（原来 constructors can return something。）

下面是我的插件的 install 函数。当 instance 是一个无效的承诺，而不是 MyPlugin 对象时，我试图从其他组件观察的属性最初是 undefined，因此不是反应性的。

export default (() => {

    return function install(Vue, options) {

        let instance = new MyPlugin(Vue, options);

        Object.defineProperties(Vue.prototype, {
            $MyPlugin: {
                get: function () {
                    return instance;
                }
            }
        });
    }
})();

Vue 组件不响应插件数据更改

Vue component does not react to plugin data changes

javascript

watch

vue.js

vuejs2