Vue の watch の属性は何ですか?

watch は監視属性です。 Vue では、watch 属性を通じて特定の属性の変更を監視できます。この属性が変更されると、次の操作を実行できます。 1. 監視対象属性によって監視される属性が変更されると、コールバック関数が自動的に呼び出され、実行されます。関連操作 2. 監視属性 監視対象属性が有効であるためには、存在する必要があります。監視プロパティを記述するには、「new Vue({watch:{}})」と「vue インスタンス化されたオブジェクト.$watch('プロパティ名' コールバック関数)」の 2 つの方法があります。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue モニターのプロパティ

開発中、プロパティが変更されたときにいくつかの操作を実行する必要がある状況に遭遇することがあります。この変更を検出するプロパティは、Vue では監視プロパティと呼ばれます。

1. 監視属性とは何ですか?

vue では、watch 属性を通じて特定の属性の変更を監視できます。この属性 変更が発生した場合、できることがいくつかあります。

監視プロパティによって監視されるプロパティが変更されると、コールバック関数 (ハンドラー) が自動的に呼び出され、関連する操作が実行されます。が存在する場合、効果はありますか。
• 気象事例を使用して監視属性が何であるかを説明します:

最初に HTML コード:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

次に JS コードを記述します:

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

コード内の

handler

関数は、前述したコールバック関数であり、

isHot 属性が変更されると、この関数が自動的に呼び出されます。 もちろん、idHot

オブジェクト表面に属性を追加できます:

immediate、この属性のブール値が true の場合、handler callback 関数 初期化中に 1 回呼び出されます。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

2. 監視属性の記述方法

監視属性を記述するには 2 つの方法があります:

Vue インスタンスでオブジェクトに直接書き込みます:

new Vue({watch:{}})
• そして、関連する設定を渡します
  vue を通じてオブジェクトをインスタンス化します.$watch(' 属性名', callback function)
を書きます
• ここでは最初の書き方をすでに示しましたが、ここで 2 番目の書き方を示します。
ここでは、vue のインスタンス化オブジェクトが vm であると仮定します。

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

3. 監視属性の詳細な監視

以前に実装した監視では、vue インスタンス データ内の単純なデータのみを直接監視できます。オブジェクトまたは配列が検出された場合、監視できません。 これを行う方法は、効率を向上させるために、vue 監視プロパティで、デフォルトで 1 つのレイヤーのみが監視されるようにすることです。複数のレイヤーを監視したい場合は、詳細な監視を手動で有効にする必要があります。 。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

deep:true

は詳細な監視をオンにします。 ディープモニタリングとは、Vue上でデータ内のオブジェクトや配列を監視することで、オブジェクトや配列のプロパティが変化した際に、監視プロパティのコールバック関数が自動的に呼び出されます。

vue では、オブジェクトの内部値の変更を検出することが実際に可能ですが、vue 監視プロパティがデフォルトで詳細な監視を有効にしないのはなぜですか? Vue 監視プロパティのコールバック関数は、データが変更されると呼び出されるため、詳細監視がオンになっている場合、Vue はオブジェクト内のすべてのプロパティを監視するため、Vue の効率が大幅に低下します。

監視属性を使用する場合、特定のビジネス ニーズに基づいて詳細な監視を有効にするかどうかを判断します。 [関連する推奨事項:

vuejs ビデオ チュートリアル

、

Web フロントエンド開発

]

以上がVue の watch の属性は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。