Vue Computed 属性基于插件值

Question

我实际上正在通过将 vue 应用程序集成到插件中来重构它，但我遇到了有关计算数据的问题。

我想做的是通过计算属性定位插件中修改的数据，但问题是 vue 不定位数据的变化

这是我的问题的一个非常简单的例子

插件

install(Vue) {
  Vue.prototype.$myPlugin= {
    data: 0,

    setValue(val) {
      this.data = val
    }
  }
}

组件（修改值不记录）

computed: {
  reactiveData() {
    return this.$myPlugin.data1
  }
},
watch: {
  reactiveData() {
    console.log('Value changed')
  }
},
mounted() {
  this.$myPlugin.setValue(32)
  this.$myPlugin.setValue(64)
}

我知道某些 vue 数据出于某种原因不是反应性的，但我真的需要了解如何使我的插件反应性。

预先感谢您的帮助！

Answer 1

您需要使用 Vue.observable:

显式地使数据响应

Vue.prototype.$myPlugin = Vue.observable({
  data: 0,

  setValue(val) {
    this.data = val
  }
})

Vue Computed 属性基于插件值

Vue Computed property based on plugin value

plugins

vue.js

computed-properties

reactive

Vue Computed 属性 基于插件值

Vue Computed property based on plugin value

plugins

vue.js

computed-properties

reactive

Vue Computed 属性基于插件值