Vue.js の「watch」の機能とは何ですか?また、どのように機能しますか?

こんにちは! Vue.js では watch 関数はどのように動作し、その機能は何ですか?

時計はとても使いやすいです。ウォッチ機能を使用すると、Vue コンポーネント内の一部の情報 (状態) の変化を監視することで、必要なタスクを実行できます。以下に簡単な例で説明します。

1. 部分: UI 要素がここに配置されます。
2. part: これは、コンポーネントのスクリプト部分が配置される場所です。

簡単な例を見てみましょう。この例では、input 要素に入力された値を監視し、値が変更されるたびにコンソールにログを記録します。

<template>
  <div>
    <input v-model="name" placeholder="Ismingizni kiriting">
    <p>Ismingiz: {{ name }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// name o'zgaruvchisini e'lon qilamiz
const name = ref('')

// name o'zgaruvchisini kuzatamiz
watch(name, (newValue, oldValue) => {
  console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
})
</script>

基本概念:

1. ref: で変数を宣言します。 ref を使用して変数を作成します。この変数はリアクティブであり、その値が変更されると、Vue は自動的にコンポーネントを再レンダリングします。

   const name = ref('')

1. 時計機能: watch 関数は、監視対象の変数を最初の引数として受け取り、コールバック関数を 2 番目の引数として受け取ります。コールバック関数の最初の引数は新しい値、2 番目の引数は古い値です。

   watch(name, (newValue, oldValue) => {
     console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
   })

watch 関数を使用すると、任意のリアクティブ変数 (ref、リアクティブ変数、または計算変数を含む) を監視できます。このメソッドを使用すると、コンポーネント内のデータが変更されたときに特定のアクションを実行できます。

ネットワーク上で私たちをフォローして、記事が役立つ場合は、コメントや Vuechi でお友達と共有してください。 ?

以上がVue.js の「watch」の機能とは何ですか?また、どのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。