この問題のトピックは、ウォッチリスナーです。
私たちが実際に開発しているとき、動的なWebページの場合、ほとんどの値は絶えず変化しています。対応する処理のために値の変化を聞く必要がある場合は、ウォッチリスナーが最良の選択です。
<div id="app">
<input type="text" v-model='msg'>
<h3>{
{msg}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:''
},
watch:{
'msg':function(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
if(newV === '100')
{
alert('Hello!');
}
},
}
});
いつものように、入力ボックスを作成し、h3タグを使用して入力ボックスの値をバインドします。
次に、Vueインスタンスで、データと同じレベルでwatch属性を記述し、次にキーと値のペアの形式で動作処理を記述しました。
'msg'は、データ内のオブジェクトの属性名、つまりキーです。
後者の関数は値であり、値の変化を聞いた後に処理する行為です。
newVは現在の最新値であり、oldVは変更前の古い値です。
次に、F12を開いて確認します。
初期値は1です。入力ボックスに10を入力すると、コンソールはそれぞれ新しい値と古い値を出力します。これで値の監視が完了し、対応する処理も実行できます。たとえば、100を入力します。
関数内にあるためnewVが100の場合、プロンプトボックスが表示されます。
Object / Arrayなどの複雑なデータ型の場合、これは単なる基本的なデータ型のリスニングです。
これに対応して、Vueは詳細なリスニングも提供します。
<div id="app">
<h3>{
{obj[0].name}}</h3>
<button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
obj:[{
name:'Ray'}]
},
watch:{
'obj':{
deep:true,
handler(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
},
}
}
});
構文形式は非常に似ています。今回は、初期値がデータ内のオブジェクト属性objであるh3タグと、h3にバインドされた属性値を変更するためのボタンを記述しました。
watch属性では、フォームがまだキーと値のペアであることがわかりますが、値に中括弧をラップし、処理関数に加えて、記号であるdeep：trueの文も追加します。深いリスニングの。
効果を試してみましょう：
ボタンをクリックする前：ボタンをクリックした
後：
オブジェクト値の変化を聞きましたが、newVとoldVの値が同じであることがわかります。どうしたのですか？
実際、Vueの公式ウェブサイトはすでにこれについて言及しています。
注：オブジェクトまたは配列を変更する（置き換えない）場合、それらの参照は同じオブジェクト/配列を指しているため、古い値は新しい値と同じになります。Vueは、ミューテーション前の値のコピーを保持しません。
この問題はより詳細です。実際、この状況に対する解決策があり、属性を計算することで処理できます。後で別の解決策を発行します。
ここでの知識の別のポイントは、実際にあります。綿密なリスニング、内の属性もあり、すぐに、すぐに返すように設定することができますが。
このプロパティを記述しない場合、ディープリスニングイベントはボタンをクリックした後にのみトリガーされます。このreturnプロパティを記述し、値をtrueに割り当てた後、ボタンをクリックしていなくても、1回リッスンします。一部のビジネスシナリオでは、この属性は非常に実用的です。
ここではデモは行いません。自分で試すことができます。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
