1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, watch, toRefs } をインポートします。 基本的なデータの種類を監視する-----監視機能: 1. ある程度の遅延性があります。ページが初めて表示されたときには実行されず、データが変更されたときのみ実行されます。 2.パラメータは現在値と元の値を取得できる 3. 複数のデータの変更を監視し、1 つのリスナーを使用してそれらを伝達できます。 設定() { 定数名 = ref('leilei') ウォッチ(名前、(現在の値、前の値) => { console.log(現在の値、前の値) }) } テンプレート: `名前: <input v-model="name" />` 参照型を聴く----- 設定() { const nameObj = reactive({name: 'leilei', englishName: 'bob'}) データを監視します watch(() => nameObj.name, (curVal, prevVal) => { console.log(現在の値、前の値) }) 複数のデータを監視する watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', 前の名前, curEng) タイムアウトを設定する(() => { ストップ1() }, 5000) }) const { name, englishName } = toRefs(nameObj) } テンプレート: `名前: <input v-model="name" /> 英語名: <input v-model="englishName" />` 2.ウォッチエフェクト過剰なパラメータはなく、コールバック関数は1つだけ 1. 遅延なくすぐに実行し、ページが最初に読み込まれたときに実行されます。 2. 内部コードを自動的に検出し、コードに依存関係がある場合はそれを実行します。 3. 聞くコンテンツを渡す必要はありません。コードの依存関係を自動的に感知します。多くのパラメータを渡す必要はありません。コールバック関数を渡すだけです。 4. 以前のデータの値を取得することはできません。現在の値のみを取得できます。 5. ここでは、一部 = 非同期操作の方が適切でしょう ウォッチエフェクト(() => { console.log(名前オブジェクト名) }) リスナーをキャンセルする方法は、ウォッチ リスナーをキャンセルする方法と同じです。 const stop = watchEffect(() => { console.log(名前オブジェクト名) タイムアウトを設定する(() => { 停止() }, 5000) }) const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', 前の名前, curEng) タイムアウトを設定する(() => { ストップ1() }, 5000) }) 3番目のパラメータimmediate: trueを追加することで、ウォッチを遅延のない即時実行に変更することもできます。 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', 前の名前, curEng) タイムアウトを設定する(() => { ストップ1() }, 5000) }, { 即時: 真 }) 上記は、vue3 watch と watchEffect の使い方と違いについての詳細な内容です。vue3 watch と watchEffect の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: docker pullがリセットされる問題を解決する
>>: Oracle10パーティションとMySQLパーティションの違いの詳細な説明
nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...
フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...
目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....
1. ビジネスシナリオ最近はファイルのアップロードやダウンロードに関する開発をしています。ダウンロー...
パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...
テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...
前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...
以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
Dockerでdocker search centosを使用する場合docker pull dock...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...
表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...
SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...
目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....