vue watch の使い方は何ですか?

vue ウォッチの使用法は次のとおりです: 1. fullName 値が変更されると、ウォッチはリッスンして実行します; 2. ウォッチはハンドラー メソッドと即時属性を実行します; 3. ディープ属性、ディープ モニタリング、およびよく使用されるオブジェクトの下の属性を変更します。

[関連記事の推奨事項: vue.js]

vue watch の使用法は次のとおりです。

1. 基本的な使用法:

fullName 値が変化すると、Watch は監視して実行します

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    firstName: &#39;Dawei&#39;,
    lastName: &#39;Lou&#39;,
    fullName: &#39;&#39;
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + &#39; &#39; + this.lastName;
    }
  } 
})

2. ハンドラー メソッドと即時属性

上の例では、値が変更された場合にのみ監視が実行されます。値が最初に使用されるときに監視が実行されるようにするため、handler 属性と immediate 属性を使用します

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

3. 深い属性 (深い監視、一般的に使用されるオブジェクトの下の属性の変更)

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log(&#39;obj.a changed&#39;);
      },
      immediate: true
    }
  } 
})

obj.a の値を変更するために入力ボックスにデータ ビューを入力すると、無効であることがわかりました。最新の JavaScript の制限 (および Object.observe の非推奨) により、Vue はオブジェクト プロパティの追加または削除を検出できません。 Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換プロセスを実行するため、Vue が応答できるように変換するには、プロパティがデータ オブジェクトに存在する必要があります。

デフォルトでは、ハンドラーは obj 属性の参照の変更のみをリッスンします。値を obj に割り当てるときのみリッスンします。たとえば、マウントされたイベント フック関数で obj を再割り当てします。

mounted: {
  this.obj = {
    a: '456'
  }
}

それでは、obj の属性 a の値を監視するには何が必要でしょうか?

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

このメソッドはパフォーマンスに大きな影響を与えます。obj 内の属性を変更すると、リスナー内のハンドラーがトリガーされます。

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

ウォッチのログアウトについてはここでは詳しく説明しませんが、実際の開発ではウォッチもコンポーネントとともに破棄されます。

関連する無料学習の推奨事項: javascript (ビデオ)

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