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

我尝试使用"test"，但这仍然无效。

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

Answer 1

数据值未在计算中自动更新的原因是因为您添加到Vue的属性MyProperty不是观察到的属性。从根本上说，Vue的反应性是有效的，因为添加到 data 的所有值都转换为观察到的属性;在引擎盖下，它们被转换为getter / setter对以及一些额外的代码，以便当其中一个属性更改时，Vue知道将更改传播到依赖于它的值的所有事物。

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

也就是说，让它变得反应相对容易。我在回答here的评论中介绍了如何做到这一点。基本上，不是将属性添加到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观察插入的参数

1 个答案: