javascript - Vue 组件不对插件数据更改使用react

Question

我正在尝试让组件对 Vue 插件中的数据更改使用react。为此，当插件实例化时，它会在其构造函数中实例化一个 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，此时控制台会按预期显示 react 性:

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})。插件中的观察者使用react(从插件内部，“obj”发生了变化)，但组件没有反应...

如果有人有指针，那就太好了!

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

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

插件类有 getter 来访问数据:

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

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

Answer 1

回答我自己的问题。问题很简单，在某些情况下，我的插件类从其构造函数返回了一个 void promise - 我没想到会产生任何效果。 (结果是constructors can return something。)

下面是我的插件的install函数。当 instance 是一个 void Promise，而不是 MyPlugin 对象时，我尝试从其他组件观察的属性最初是 未定义，因此不是 react 性的。

export default (() => {

    return function install(Vue, options) {

        let instance = new MyPlugin(Vue, options);

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