ホームページ > 記事 > ウェブフロントエンド > Vue での Computed と Watch の使用法と違い
Vue での Computed と Watch の使用法と違い
- angryTomオリジナル
- 2020-02-07 17:37:272094ブラウズ
この記事では、vue の計算属性 computed と監視属性 watch の違いを紹介します。vue フロントエンド フレームワークを学習している学生に役立つことを願っています。
1. 計算属性 (計算)
1. 計算属性は、テンプレート内の式を簡潔にして保守しやすくするために使用されます。 . 単純な計算では、当初の設計意図に沿っています。
例:
<p id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>操作は非常に複雑で長く、保守が難しいため、計算された属性を使用して複雑な操作を記述する必要があります。
したがって、次のように書き換えることができます:
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>要約:
1. 変数はデータ内で定義されるのではなく、計算結果内で定義されます。記述方法は、メソッドを記述し、戻り値があります。関数名はかっこなしでページ テンプレートに直接表示されます。
2. 渡された変数の変更に従って結果を更新します。
3. 計算されたプロパティは、応答性の依存関係に基づいてキャッシュされます。いずれかの値が変更されていない場合は、最後の計算でキャッシュされたデータが呼び出され、プログラムのパフォーマンスが向上します。メソッドは呼び出されるたびに再計算されますが、不要なリソースを消費するために、計算された属性を使用することを選択します。
計算された属性のファジー クエリの例:
<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>2. 属性の監視 (監視)
上記の計算された属性に関しては、初期化中にこれは監視および計算できますが、監視は変化があった場合にのみトリガーされます。
他のデータの変更に合わせて変更する必要があるデータがある場合、またはデータの変更時に非同期操作や高コストの操作を実行する必要がある場合は、watch を使用できます。
例:
<body>
<div id="app">
<p>单价：<input type="text" v-model="price"></p>
<p>数量：<input type="text" v-model="number"></p>
<p>计算金额：{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>計算プロパティとプロパティ監視の違い:
1. 計算プロパティ変数は計算変数で定義され、プロパティ監視はデータ定義で定義されています。
2. 計算属性は、他の値に依存する値の宣言的な記述です。依存する値が変更されると、結果が再計算され、DOM が更新されます。属性は定義された変数をリッスンし、定義された値が変更されると、対応する関数が実行されます。
以上がVue での Computed と Watch の使用法と違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。