Vue のリスナーの基本的な使用例

序文

Vue は、watch オプションを通じてデータの変更に応答するより一般的な方法を提供します。このアプローチは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。

1. リスナーの基本的な使い方

<div id="demo">{{ fullName }}</div>

var vm = 新しい Vue({
el: '#demo',
データ： { 
    ファーストネーム: 'Foo', 
    姓: 'バー', 
    fullName: 'Foo Bar' }, 
時計： 
    firstName: 関数 (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: 関数 (val) { 
        this.fullName = this.firstName + ' ' + val } } })

このコードの目的は、firstName と fullName を監視し、変更があった場合に fullname の値を変更することです。

2. リスナー形式

メソッド形式のリスナー

デメリット 1: ページに初めてアクセスしたときに自動的にトリガーされない!
デメリット 2: オブジェクトをリッスンしている場合、属性のプロパティが変更されると、リスナーはトリガーされません。

オブジェクト形式リスナー

メリット1: ページに入るとすぐに自動で発動できる！
メリット2：監視対象内の属性が変更されたかどうかの詳細な監視が可能になります。

3. ページに入るとすぐに監視とディープモニタリングをトリガーする

ページに入るとすぐにリスナーをトリガーします

これは即時オプションを追加することで実現されます

定数vm = 新しいVue({
    el: '#app',
    データ： {
        情報：
            ユーザー名: 'admin'
        } 
    },
    時計：{
        情報：
            ハンドル(newVal){
                コンソールログ(新しい値)
            },
            // ページに入るとすぐにリスナーをトリガーしますimmediate: true
        }
    }
})

ディープモニタリング

上記のコードでは、ユーザー名が変更されたときに正常に監視できません。変更されるのはオブジェクト属性の値であるため、詳細な監視が必要です。deepオプションを追加するだけです。

定数vm = 新しいVue({
    el: '#app',
    データ： {
        情報：
            ユーザー名: 'admin'
        } 
    },
    時計：{
        情報：
            ハンドル(newVal){
                コンソールログ(新しい値)
            },
            // ページに入るとすぐにリスナーをトリガーしますimmediate: true,
            // 詳細な監視を実装します。オブジェクトのいずれかのプロパティが変更される限り、「オブジェクト監視」がトリガーされます。
            深い: 本当
        }
    }
})

ディープリスニングはリスニングオブジェクトのサブプロパティの値を返します。

上記のコードの実行結果は、info オブジェクトを印刷することです。username の値を印刷したいのですが、newVal.username を追加するのは面倒です。実際には、変更されたサブ属性の値を直接監視して印刷することができます。監視するサブ属性を一重引用符で囲むだけです。

定数vm = 新しいVue({
    el: '#app',
    データ： {
        情報：
            ユーザー名: 'admin'
        } 
    },
    時計：{
        'info.ユーザー名': {
            ハンドル(newVal){
                コンソールログ(新しい値)
            }
        }
    }
})