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パーティションの違いの詳細な説明
テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...
1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...
目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...
HTML: タイトル見出しは <h1> - <h6> などのタグによって定...
私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...
Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...
1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...
目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...
他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...
mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...
1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...
目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...
この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...
1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...
コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...