Berechnete Eigenschaften auf Funktion Instanzen

Question

In knockout.js konnte ich folgendes tun:

function Person() { 
    this.firstName = ko.observable('Foo') 
    this.lastName = ko.observable('Bar') 
    this.fullName = ko.pureComputed(() => { 
     return this.firstName() + this.lastName() 
    }) 
} 

var p = new Person() 
console.log(p.fullName()) // FooBar 

Gibt es eine Möglichkeit reaktive berechnete Eigenschaften auf Objekte hinzuzufügen, die nicht Bestandteil Daten in Vue?

Answer 1

In Vue müssen Sie die reaktiven Eigenschaften und Methoden, die Knockout erfordert, nicht explizit deklarieren. Alles ist nur ein einfaches Objekt.

Das Objekt wird in Vue reaktiv, wenn Sie es einer Komponente über eine Eigenschaft zuweisen, die im Objekt data dieser Komponente deklariert wurde.

So Ihr Beispiel in Vue wäre nur:

function Person() { 
    this.firstName = 'Foo'; 
    this.lastName = 'Bar'; 
    this.fullName = function() { 
    return this.firstName + this.lastName; 
    }; 
} 

var p = new Person(); 
console.log(p.fullName()); // FooBar 

Wenn Sie es sich in einer Komponente verwenden, dann wird es reaktiv sein, wie folgt aus:

const comp = new Vue({ 
    template: '<div>{{ person.fullName() }}</div>', 
    data: { 
    person: null, 
    }, 
}); 

// Vue detects that p is being assigned to the reactive property 
// 'person' and makes p reactive. 
comp.person = p; 

Ich sollte erwähnen, ich Ich bin nicht wirklich sicher, was Sie meinen, "die keine Komponentendaten in Vue sind", weil der ganze Grund, warum Sie möchten, dass etwas in erster Linie reaktiv ist, weil Sie wollen, dass es in einer Komponente Vorlage und für die Komponente gerendert wird Rendern Sie das Rendering automatisch, wenn sich eine Eigenschaft ändert. Sie können dies also nicht wirklich tun Reaktiv extern gegenüber Vue.

Ich habe Ihre Frage wie folgt verstanden: "Wie mache ich etwas, das auf Vue reagiert, ohne es direkt in den Daten oder berechneten Eigenschaften einer Vue-Komponente angeben zu müssen?". Beachten Sie, dass die Eigenschaft person Eigenschaft im Voraus in data der Komponente für diese Eigenschaft (und alle zugeordneten Daten) als reaktiv erklärt werden muss. Solange Sie das tun, können Sie Ihre Modellobjekte beliebig gestalten.