VueJS 观察插入的参数

Question

我从 VueJS 2 开始，我创建了一个简单的插件，可以将参数添加到 Vue 实例。

我有问题，因为当我更新此值时，我的计算属性仍然相同。

我的示例插件代码：

export default function (Vue) {
    Vue.MyProperty = "test"

    Object.defineProperties(Vue.prototype, {
        "$myProperty": {
            "get": function () {
                return Vue.MyProperty
            },

            "set": function (value) {
                Vue.MyProperty = value

                return this
            }
        }
    })
}

还有我的组件代码

export default {
    "computed": {
        "test": function () {
            return this.$myProperty
        }
    }
}

当我在其他组件中更改this.$myProperty 时，我的组件返回无效值（例如，当我从"test" 更改为"newvalue" 时，我可以看到"newvalue"）但计算属性test 仍然是旧值（@ 987654328@ 在我的示例中）。

我尝试使用this.$set(this, "$myProperty", value)，但这仍然不起作用。

如何使用或声明此属性以在计算或监视属性中使用它？

Answer 1

数据值没有在计算中自动更新的原因是因为您添加到 Vue 的属性 MyProperty 不是 观察到的 属性。从根本上说，Vue 的反应性是有效的，因为添加到 data 的所有值都被转换为 observed 属性；在幕后，它们被转换为带有一些附加代码的 getter/setter 对，因此当这些属性之一更改时，Vue 知道将更改传播到依赖于它的值的所有事物。

然而，问题中的代码只是向 Vue 对象添加了一个普通属性。你可以改变它，但它不是被动的。

也就是说，让它反应起来相对容易。我在我的回答here 中介绍了如何在 cmets 中执行此操作。基本上，不用将你的属性添加到 Vue，只需创建一个新的 Vue 对象（开销非常低），然后让你想要响应的属性成为该 Vue 的属性。这是一个工作示例。

console.clear()

function MyPlugin(Vue) {
  let store = new Vue({data:{MyProperty: "some value"}})

    Object.defineProperties(Vue.prototype, {
        "$myProperty": {
            "get": function () {
                return store.MyProperty
            },

            "set": function (value) {
                store.MyProperty = value

                return this
            }
        }
    })
}

Vue.use(MyPlugin)

const MyComponent = {
  template:`<div>{{test}}</div>`,
    "computed": {
        "test": function () {
            return this.$myProperty
        }
    }
}

new Vue({
  el: "#app",
  components:{
    MyComponent
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <my-component></my-component>
  <button @click="$myProperty = 'new value'">Change</button>
</div>