ホームページ >ウェブフロントエンド >jsチュートリアル >vue 計算プロパティの使用例
vue 計算プロパティの使用例
- php中世界最好的语言オリジナル
- 2018-05-02 14:45:541182ブラウズ
今回は、vue 計算プロパティの使用例をお届けします。vue 計算プロパティを使用する際の 注意事項 は何ですか? ここでは実際のケースを見てみましょう。
1. 計算属性とは何ですか? テンプレート内の 式 は、もともと単純な操作用に設計されています。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:
<p id="example">
{{ message.split('').reverse().join('') }}
</p>
ここの式には 3 つの操作が含まれていますが、これはあまり明確ではないため、複雑なロジックに遭遇した場合は、Vue の特別な computed 属性 computed を使用して処理する必要があります。
2. 計算属性の使用法
最終的に結果が返される限り、演算、関数呼び出しなどを含むさまざまな複雑なロジックを計算属性で完了できます。 計算された属性を使用して上記の例を書き直してみましょう
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
結果:
元のメッセージ: "Hello"計算された反転メッセージ: "olleH"
上記の例の単純な使用法に加えて、計算された属性複数の Vue インスタンスのデータを利用することもできます。データが変更されると、計算されたプロパティが再実行され、ビューが更新されます。
<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p>
</body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
}
}
}); 計算プロパティについては、見落とされがちな非常に実用的なヒントが 2 つあります。1 つ目は、計算プロパティは他の計算プロパティに依存する可能性があることです。2 つ目は、計算プロパティは現在の Vue インスタンスのデータに依存するだけでなく、他のインスタンスのデータ (例:
<p id="app1"></p>
<p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});
var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
}
}
});
) 各計算プロパティにはゲッターとセッターが含まれており、上記の 2 つの例は計算プロパティのデフォルトの使用法であり、読み取りにはゲッターのみを使用します。
必要に応じて、通常のデータを変更するのと同じように計算された属性の値を手動で変更する場合、setter 関数がトリガーされて、次のようなカスタム操作が実行されます。ほとんどの場合、計算プロパティを読み取るにはデフォルトのゲッター メソッドのみを使用します。セッターはビジネスではほとんど使用されないため、計算プロパティを宣言する場合は、ゲッターとセッターの両方を宣言することなく、デフォルトの書き込みメソッドを直接使用できます。 。
3. 計算された属性のキャッシュ
上の例では、計算された属性を使用することに加えて、次のような式でメソッドを呼び出すことによっても同じ効果を達成できます: var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
同じ関数を定義できます計算されたプロパティではなくメソッドであるため、どちらの方法でも最終結果はまったく同じになります。 1 つは を使用して値を取得し、もう 1 つは reverseTitle を使用して値を取得します。
reverseTitle()小さな例:
<p>{{reverseTitle()}}</p>
// 在组件中
methods: {
reverseTitle: function () {
return this.title.split('').reverse().join('')
}
}
対照的に、再レンダリングがトリガーされると、呼び出しメソッドは常に関数を再度実行します。
なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティ A があるとします。その場合、 A に依存する他の計算プロパティがある可能性があります。
キャッシュがない場合、必然的にAのgetterを複数回実行することになります！キャッシュしたくない場合は、代わりにメソッドを使用してください。
Vue 計算プロパティの使用法を見てみましょう
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
computed: {
reverseTitle: function(){
return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
},
reverseTitle1: function(){
return this.title.split('').reverse().join('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP に関する他の関連記事に注目してください。中国語のサイトです！ 推奨読書:
nodejsのマルチバージョン管理の使用方法の詳細な説明以上がvue 計算プロパティの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。