計算さプロパティknockout.jsで

Question

を：

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 

Vueのコンポーネントデータないオブジェクトに反応計算されたプロパティを追加する方法はありますか？

Answer 1

Vueでは、ノックアウトのような反応性のあるプロパティとメソッドを明示的に宣言する必要はありません。すべてが単なる単純なオブジェクトです。

実際にVueでオブジェクトを無効にするのは、そのコンポーネントのdataオブジェクトで宣言されているプロパティを通じてコン​​ポーネントに割り当てたときです。

だから、Vueの中にあなたの例は、単に次のようになります。

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 

あなたはコンポーネント内部でそれを使用する場合、それは、反応性になり、次のように：

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; 

私は私は、言及する必要がありますなぜなら、まず何かを反応的にしたい理由は、それがコンポーネントのテンプレートにレンダリングされ、そのコンポーネントが次のコンポーネントにレンダリングされたいからです。なぜなら、Vueのコンポーネントデータではないことです。プロパティが変更されたときに自動的に再描画されるので、実際にはそうすることはできませんVueの外部からの反応性がある。

「Vueコンポーネントのデータまたは計算プロパティ内で直接指定する必要なしに、Vueに反応するものを作成するにはどうすればよいですか」という質問を理解しました。 personプロパティは、そのプロパティ（およびそれに割り当てられたすべてのデータ）が反応するように、コンポーネントのdataで事前に宣言する必要があります。あなたがそれを行う限り、あなたはあなたが望むようにあなたのモデルオブジェクトを設計することができます。