VueJS beobachten verstopften Parameter

Question

Ich beginne mit VueJS 2 und ich erstellte ein einfaches Plugin, das Parameter zu Vue-Instanz hinzufügt.

Ich habe ein Problem, denn wenn ich diesen Wert aktualisiere, sind meine berechneten Eigenschaften immer noch gleich.

Mein Beispiel Plugin Code:

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 
      } 
     } 
    }) 
} 

Und Code meiner Komponente

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

Wenn ich this.$myProperty in einer anderen Komponente geändert meine Komponente kehrt Wert vaid (in Beispiel, wenn ich von "test" in "newvalue" I geändert kann "newvalue" sehen) aber berechnete Eigenschaft test ist immer noch alter Wert ("test" in meinem Beispiel).

Ich habe versucht, this.$set(this, "$myProperty", value) zu verwenden, aber das funktioniert immer noch nicht.

Wie kann ich diese Eigenschaft verwenden oder deklarieren, um sie in berechneten oder beobachteten Eigenschaften zu verwenden?

Answer 1

Der Grund der Datenwert nicht automatisch in dem berechneten aktualisiert wird, weil die Eigenschaft, die Sie Vue hinzugefügt, MyProperty ist kein Eigenschaft beobachtet. Grundsätzlich funktioniert die Reaktivität von Vue, weil alle zu Daten hinzugefügten Werte in beobachtete Eigenschaften umgewandelt werden; Unter der Haube werden sie in Getter/Setter-Paare mit etwas zusätzlichem Code umgewandelt, so dass Vue, wenn sich eine dieser Eigenschaften ändert, die Änderungen an alle Dinge propagiert, die von ihrem Wert abhängen.

Der Code in der Frage fügt dem Vue-Objekt jedoch nur eine normale Eigenschaft hinzu. Sie können es ändern, aber es ist nicht reaktiv.

Das heißt, es ist relativ einfach, es reaktiv zu machen. Ich behandle das in den Kommentaren zu meiner Antwort here. Anstatt Ihre Eigenschaft zu Vue hinzuzufügen, erstellen Sie einfach ein neues Vue-Objekt (das einen sehr geringen Overhead hat) und machen Sie die Eigenschaft, die Sie reaktivieren wollen, zu einer Eigenschaft dieser Vue. Hier ist ein funktionierendes Beispiel.

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>