2

我从 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在其他组件中更改时，我的组件返回 vaid 值（例如，当我从更改为时，"test"我"newvalue"可以看到"newvalue"）但计算属性test仍然是旧值（"test"在我的示例中）。

我尝试使用this.$set(this, "$myProperty", value)，但这仍然无法正常工作。

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

4

1 回答 1

2

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

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

也就是说，使其具有反应性相对容易。我在此处对我的答案的评论中介绍了如何执行此操作。基本上，不用将你的属性添加到 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>

于 2017-10-02T14:08:23.470 回答