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

我尝试使用 this.$set(this, "$myProperty", value) 但这仍然无效。

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

Answer 1

数据值在计算中没有自动更新的原因是因为你添加到 Vue 的属性，MyProperty 不是 observed 属性。从根本上说，Vue 的反应性是有效的，因为添加到 data 的所有值都被转换为 observed 属性；在引擎盖下，它们被转换成 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>

VueJS 观察插入的参数

VueJS observe plugged parameter

javascript

object-property

vue.js

vuejs2