計算プロパティと監視の違いとその使用法

1。概要

computed と watch はどちらも、データの変更を監視するために使用される Vue フレームワークのプロパティです。

2. 計算されたプロパティ

1. 使用方法は data 内のデータと同じですが、実行方法に似ています
2. 呼び出し時に () を付けないでください
3. return が必要です
4. 関数の属性が指定されている場合変更されていないものに依存する場合は、キャッシュから読み取ります。

例

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;
    },
},

3.監視監視

1. watch の関数名は data のデータ名と一致している必要がある
2. watch の関数には 2 つのパラメータがある (前者は newVal、後者は oldVal)
3. watch の関数を呼び出す必要はない
4. 監視はリッスンのみを行います。データのアドレスが変化するかどうかを監視するのではなく、データの値が変化するかどうかを監視します。詳細に監視するには、 deep: true 属性を使用する必要があります。 5. Immediate : true は、次の場合に監視します
。ページが最初にロードされます。

例

watch: {
    keyword () {
        const result = []
        this.jsonData.forEach(val => {
            if (val.name.indexOf(this.keyword) > -1) {
                result.push(val.name)
            }
        });
        this.cityList = result
    }
},

4. 違い

1. 関数: computed は計算された属性です。watch は値の変化を監視し、対応するコールバックを実行します。 2.
キャッシュを呼び出すかどうか: 計算された関数が依存する属性が変化しないときにキャッシュが呼び出されます。監視対象の値が変化するたびに watch が呼び出されますコールバックを呼び出す
3. return を呼び出すかどうか: 計算が存在する必要があります; watch はオプションです
4. 使用シナリオ: 1 つの属性が複数の属性の影響を受ける場合に計算されます (ショッピングカートの商品決済など) ; 検索ボックスなど、1 つのデータが複数のデータに影響を与える場合に監視します。
5. 非同期をサポートするかどうか: 計算関数は非同期を持つことができません。