Vueの監視プロパティの詳細

1. 最初のhandler : その値はコールバック関数です。つまり、変更が検出された場合に実行される関数です。
2. 2 番目はdeepです。その値は true または false です。深く監視するかどうかを確認します。（通常、モニタリング中にオブジェクトのプロパティ値の変化を聞くことはできませんが、配列の値の変化を聞くことはできます。）
3. 3 番目はimmediateです。その値は true または false です。現在の初期値を使用してハンドラー関数を実行するかどうかを確認します。

1.watchは一般的なデータ（数値、文字列、ブール値）の変更を監視します。

例えば：

1. 数値

dataセンターでは、クリックイベントを通じてnumを変更すると、 watchプロパティを通じてその変更を監視します。

<div id="アプリ">
        <p>{{数値}}</p>
        <button @click="num++">クリックして追加</button>
    </div>
      vm = new Vue({
            el:'#app',
            データ：{
                番号:0
            },
            時計：{
            // 現在の値（変更された値） newval 古い値 oldval
                数値:関数(新しい値、古い値){
                    console.log("新しい値は: "+newval);
                    console.log("古い値は: "+oldval);
                }
            }
        })

ボタンをクリックすると、コンソールを確認します。

注:ウォッチには他に2つの方法があります

 時計：{
            // 現在の値（変更された値） newval 古い値 oldval
                // 数値(新しい値、古い値){
                // console.log("新しい値は: "+newval);
                // console.log("古い値は: "+oldval);
                // }
                番号:{
                    ハンドラ(新しい値、古い値){
                    console.log("新しい値は: "+newval);
                    console.log("古い値は: "+oldval);
                    }
                }
            }

出力結果は一貫しています。次の例はすべて、 handlerを持つメソッドである 3 番目のメソッドを使用しています。

2. 文字列

<div id="アプリ">
        <input type="text" v-model="mes">
        <p>入力内容は次のとおりです: {{mes}}</p>
    </div>
 vm = new Vue({
            el:'#app',
            データ：{
                私:''
            },
            時計：{
                私:{
                    ハンドラ(新しい値、古い値){
                        console.log("新しいコンテンツ: "+newval);
                        console.log("古いコンテンツ: "+oldval);
                    }
                }
            }
        })

テキストボックスにコンテンツを入力すると、次のようになります。

出力を表示します。

3. ブール値

<div id="アプリ">
        <p v-show="isShow">ブール値を変更して表示と非表示を切り替える</p>
        <button @click="isShow = !isShow">クリックしてブール値を変更します</button>
    </div>
 

vm = new Vue({
            el:'#app',
            データ：{
                isShow:true
            },
            時計：{
                表示:{
                    ハンドラ(新しい値、古い値){
                        console.log("新しい値: "+newval);
                        console.log("古い値: "+oldval);
                    }
                }
            }
        })

ボタンがクリックされたら、コンソールを確認します。

2.watchは複雑なデータ型の変更を監視します

deep 属性:オブジェクトの変更を深く監視します (深く監視するかどうかを示します)。オブジェクトの変更を監視する必要がある場合、通常の監視方法ではオブジェクトの内部プロパティの変更を監視できません。このとき、オブジェクトを深く監視するには deep 属性が必要です。

1. オブジェクト

<div id="アプリ">
        <input type="text" v-model="mes.name">
        <p>入力内容は次のとおりです: {{mes.name}}</p>
    </div>
vm = new Vue({
            el:'#app',
            データ：{
                mes:{名前:''}
            },
            時計：
                私:{
                    // 監視プロパティ監視オブジェクトを監視する場合、新しい値と古い値は同じです handler(newval){
                        console.log("新しい値: "+this.mes.name);
                    },
                    深い:本当
                }
            }
        })

テキストボックスに何かを入力したら、コンソールを確認します。

オブジェクトに num を追加し、スライダーで num の値を制御して、聞くこともできます。

 <input type="range" v-model="mes.num">
 データ：{
                mes:{名前:'',数字:''}
            },
 
時計：
                私:{
                    // 監視プロパティ監視オブジェクトを監視する場合、新しい値と古い値は同じです handler(newval){
                        console.log("num 新しい値: "+this.mes.num);
                    },
                    深い:本当
                }
            }

スライドしながら出力を表示します。

2. 配列

<本文>
    
    <div id="アプリ">
        <ul>
            <li v-for="(item,index) in arr">{{item}}</li>
        </ul>
        <!-- クリックすると配列に新しいコンテンツを追加するボタンを追加します -->
        <button @click="add()">クリックして追加</button>
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                編曲:[1,2,3,4,5]
            },
            方法:{
                追加（）{
                    // 配列の現在の最大値を取得します。let cont = this.arr[this.arr.length-1];
                    // 自己インクリメント cont++;
                    // 配列の最後の位置に要素を追加します。this.arr.push(cont);
                }
            },
            時計：
                ar:{
            // 配列を監視する場合、深く監視する必要はありません。
                    ハンドラ(newval){
                        console.log("新しい配列は: "+newval);
                    }
                }
            }
        })
    </スクリプト>
</本文>

「要素の追加」をクリックした後、出力を確認します。

3. オブジェクト配列

<本文>
    
    <div id="アプリ">
        <ul>
            <li v-for="リスト内の項目">
                {{item.id}}--{{item.name}}
            </li>
        </ul>
        <!-- テキスト ボックスを定義し、配列に新しいオブジェクトを追加します -->
        <input type="text" v-model="id">
        <input type="text" v-model="名前">
        <button @click="add()">追加</button>
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                リスト：[
                    {id:1,name:"哇哈"},
                    {id:2,name:"哇哈哈"},
                    {id:3,name:"哇哈哈哈哈"}
                ]、
                id:"",
                名前：''
            },
            メソッド: {
                // 受信した入力を配列に追加する add(){
                    this.list.push({id:this.id,name:this.name});
                    // テキスト ボックスの内容をクリアします this.id=this.name=''
                }
            },
            時計：{
                // 注意: 監視オブジェクトで監視されるデータは、データセンターデータにすでに存在するデータである必要があります // 監視監視配列オブジェクトの新しい値と古い値は等しくなりますが、配列を監視する場合、詳細な監視は必要ありません。
                リスト：{
                    ハンドラ(newval){
                        newval.forEach((item)=>{
                            console.log(アイテム名);
                        })                       
                    }
                }
            }
        })
    </スクリプト>
</本文>

新しい要素を追加した後の出力を表示します。

4. オブジェクト配列のプロパティ

<本文>
    
    <div id="アプリ">
        <ul>
            <li v-for="リスト内のx">
                {{x.id}}---{{x.name}} &emsp;
                <button @click="mod(x.id)">変更</button>
            </li>
        </ul>
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                リスト：[
                    {id:1,名前:'ww'},
                    {id:2,名前:'ee'},
                    {id:3,名前:'qq'}
                ]、
            },
            メソッド: { 
                mod(id,名前){
                    this.list.forEach((item)=>{
                        // トラバーサル処理中に判断を下します。クリックした ID が現在編集中のデータである場合 if (item.id == id) {
                            item.name = "古い鉄"
                            console.log(アイテム);
                        }
                    })
                }
            },
            時計：
                リスト：{
                    ハンドラ(x,y){
                        x.forEach((要素)=>{
                            console.log(要素名);
                        })
                    },
                    深い:本当
                }
            }
        })
    </スクリプト>
</本文>

[変更] をクリックすると、出力が表示されます。

Vue の監視プロパティの詳細に関するこの記事はこれで終わりです。Vue の監視プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: