1。概要
computedフレームワーク内のデータ変更を監視するために使用されるプロパティwatchです。vue
2 つの計算された計算プロパティ
1. 使用方法はdataその中のデータと同じですが、実行方法に似ています.
2. 呼び出し時に追加しないでください. 3. return（）
が必要です. 4. 関数が依存する属性の場合変更されていない場合は、キャッシュから読み取ります. そして、例return
<el-form>
<el-row>
<el-col :span="24" style="display:flex;justify-content:flex-end;">
<span><i>当前价税合计：</i>{
{Total}}</span>
</el-col>
</el-row>
</el-form>
computed:{
Total(){
let price = 0;
for (let i = 0;i<this.tableData.length;i++) {
price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
}
this.detailedSend.total = price
return price;
},
},
三、見守り監視
1.watch関数名は、data 内のデータ名と一致している必要があります.
2.watch関数 in には、前者とnewVal後者の 2 つのパラメーターがありますoldVal
. 3.watch関数 in を呼び出す必要はありません.
4.watchデータの値が変更されます. データのアドレスが変更されたかどうかを監視しません. 詳細に監視するには、deep：true属性を一緒に使用する必要があります.
5.immediate:trueページが初めて読み込まれたときに
監視を行います.
<template>
<div>
vue使用watch监听实现类似百度搜索功能
<div>
<input type="text" class="search" placeholder="搜索" v-model.trim='keyword' />
</div>
<div v-show="keyword">
<ul>
<li v-for="item in cityList" :key="item.id" @click="handleCityClick(item.name)">
{
{item}}
</li>
</ul>
</div>
</div>
</template>
<script>
// 防抖函数
const delay = (function () {
let timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback.ms)
}
})()
export default {
data () {
return {
keyword: '',
cityList: [],
timer: null,
jsonData: [{
'id': 1,
'name': '北京'
},
{
'id': 2,
'name': '上海'
},
{
'id': 3,
'name': '广州'
},
{
'id': 4,
'name': '深圳'
},]
}
},
watch: {
keyword () {
//函数防抖
if (this.timer) {
clearTimeout(this.timer)
}
//删除文字 清零
if (!this.keyword) {
this.cityList = []
return
}
this.timer = setTimeout(() => {
const result = []
this.jsonData.forEach(val => {
if (val.name.indexOf(this.keyword) > -1) {
result.push(val.name)
}
});
this.cityList = result
console.log(this.cityList)
}, 100)
}
},
}
</script>
4つ目、違い
1.機能:computed計算された属性です; 時計は値の変化を監視し、対応するコールバックを実行します
2.キャッシュを呼び出すかどうか:computed関数が依存する属性がwatch変更されていない場合にキャッシュが呼び出されます; コールバック監視値が変化するたびに呼び出される
3 , return を呼び出すかどうか:computed必須; 監視は不可
4.使用シナリオ:computedショッピング カートの商品決済など、1 つの属性が複数の属性の影響を受ける場合watch1 つのデータが複数の属性に影響する場合検索ボックスなどのデータの断片
5.サポートされているかどうか async :computed関数は async を持つことはできませんwatch。