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我的分量返回VAID值（例如，当我从"test"变成"newvalue"我可以看到"newvalue"）但计算出的属性test仍然是旧值（在我的示例中为"test"）。

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

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

Answer 1

数据值未在计算中自动更新的原因是因为您添加到Vue的属性MyProperty不是观察到的属性。基本上，Vue的反应性是有效的，因为所有加入到数据的值都转换成，观察到的属性;在引擎盖下，它们被转换成带有一些附加代码的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>