Vueウォッチの監視方法の概要

vueでは、データの変更に対応するためにwatchが使用されます。 watch使用方法は大きく分けて 3 つあります。

1. Vueにおけるwatchの役割はその名の通り、監視の役割です。

たとえば、次のようなオブジェクトがあります。

ウォッチデータ: {
    名前： ''、
    年： ''、
}

2. このオブジェクトのプロパティを監視する

ウォッチデータ: {
    ハンドラ: 関数() {
        コンソールログ();
    },
    深い: 本当
}

監視対象はdeep監視することができ、そうでなければ対象の変化を検出できない。

3. このオブジェクトのプロパティを監視する

方法1:

時計：
 'watchData.name'(新しい値、古い値) {
     console.log(新しい値);
 }
}

方法2:

時計：
    'watchData.name': {
        ハンドラ: 関数() {
            コンソールログ();
        }
    }
},

なぜオブジェクトのプロパティを監視する必要があるのでしょうか? オブジェクトを監視すると、オブジェクト内のデータによってwatchが再実行されます。これは、 watchを実行する前に特定のプロパティの変更を監視したり、 watchを実行する前にオブジェクト内のプロパティの変更を監視したりすることを望んでいない可能性があります。これにより、パフォーマンスが低下します。したがって、オブジェクトの単一のプロパティを監視するこの方法を使用して対処し、「監視するオブジェクト.プロパティ」を引用符で囲みます。

4. このオブジェクトのプロパティを監視する

計算: {
    取得名() {
        this.watchData.name を返す 
    }
},
時計：
    getName(新しい値、古い値) {
        console.log(新しい値);
    }
},

このメソッドは、実際には 2 番目のメソッドと同じです。違いは、 computedが使用され、その後getNameメソッドがリッスンされることです。実際、getName メソッドは watchData オブジェクトのname属性を返します。

vue watch 監視方法の概要についてはこれで終わりです。vue watch 監視方法の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。