vue でデータ変更を自動的に検出するために watch を実装する方法

この記事では、vue watch がデータの変更を自動的に検出してリアルタイムにレンダリングする方法を主に紹介し、参考として提供します。

この記事では、vue watch がデータの変更を自動的に検出してリアルタイムにレンダリングする方法を紹介し、詳細は次のとおりです:

まず watch がオブジェクトであることを確認し、オブジェクトとして使用する必要があります。 。

オブジェクトにはキーと値があります。

キー: これは$routeなどの監視したいやつです。これはルーティングの変更を監視するためのものです。またはデータ内の変数。
値は関数にすることができます。監視しているものが変更されたときに実行する必要がある関数です。この関数には 2 つの仮パラメータがあり、1 つ目は現在の値、2 つ目は変更された値です。

値は関数名にすることもできますが、この関数名は一重引用符で囲む必要があります。

3番目の状況は素晴らしいです。

値はオプションを含むオブジェクトです。オプションは 3 つあります。

1. 最初のハンドラー: その値はコールバック関数です。つまり、変化が検出されたときに実行されるべき関数です。

2. 2 番目は深いです。その値は true または false で、詳細に監視するかどうかを確認します。 (通常、オブジェクトの属性値の変更は監視中に監視できませんが、配列値の変更は聞くことができます。)

3. 3 番目は即時です。その値は true または false で、ハンドラーが実行されたかどうかを確認します。現在の初期値を使用した関数。

watchインスタンス

前回、this.$setまたはvm.setを使用して、ページ上にレンダリングされたデータ（追加、削除）を動的に変更して再計算および再レンダリングできることを説明しました。 。

次のコード例のように、特定のデータまたは値を動的に変更し、変更した値に基づいて他の処理操作 (表示、非表示、追加、削除など) を実行する必要がある場合があります。は Tab の例です:

vue プロジェクトに新しい Tab コンポーネント ページを作成します

<template>
{{index}}
 <p>
   <p @click="showFun(0)">Tab1</p>
   <p @click="showFun(1)">Tab2</p>
   <p @click="showFun(2)">Tab3</p>
 </p>
 <p>
   <p v-if="index == 0">cont1</p>
   <p v-if="index == 1">cont1</p>
   <p v-if="index == 2">cont1</p>
 </p>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值，做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch を使用すると、データが変更されたときに非同期または高コストの操作を実行する必要がある場合、このメソッドが最も便利です

別の検索例を紹介します:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: &#39;&#39; // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }， 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

Cropperのjsでvueを介して画像のトリミングとアップロード機能を実装する方法

vueでcropperjsを使用する方法（詳細なチュートリアル）

vue.jsで画像のローカルプレビューを実装するトリミング、圧縮、アップロードなどの一連の機能

FastClick ソースコードの詳細な説明 (詳細なチュートリアル)

vue と element-ui を使用してテーブル コンテンツのページングを実装する方法

以上がvue でデータ変更を自動的に検出するために watch を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。