01. リスナーウォッチ(1)機能
エクスポートデフォルト{ データ() { 戻る { 番号: 1 } }, 時計:{ // 通常の監視方法。ここではデータ内の数値属性を監視することを意味します // 最初のパラメータは変更後の新しい値を示し、2 番目のパラメータは変更前の古い値を示します number(newVal,oldVal){ コンソールにログ出力します。 コンソールにログ出力します。 } } } (2)特性と方法
エクスポートデフォルト{ データ(){ 戻る { 番号: 1 } }, 時計: // 数値属性をリッスンする number: { ハンドラ(newVal, oldVal){ }, 即時: true, // すぐに聞く} } } (3)監視対象
エクスポートデフォルト{ データ() { 戻る { オブジェクト: { 1: 1 } } }, 時計: オブジェクト: { ハンドラ(newVal){ console.log('聞いている', newVal) }, 即時: 真 } }, 作成された(){ // 属性の変更操作であるため監視できません // 一度印刷すると、印刷結果は変更された値になります。 この.obj.a = 2 // オブジェクトへの直接割り当て操作なので監視できます // 2 回印刷します (即時監視は 1 回印刷され、変更は 1 回印刷されます) this.obj = {a: 2} } }
エクスポートデフォルト{ 時計: 'obj.a': { ハンドラ(newVal){ コンソールログ(新しい値) } } }, 作成された(){ // 次の両方とも監視して 2 回印刷できます this.obj.a = 2 this.obj = {a:2} } }
エクスポートデフォルト{ 時計: オブジェクト: { ハンドラ(newVal){ コンソールログ(新しい値) }, 深い:本当、 即時: 真 } }, 作成された(){ // 詳細な監視の後、属性の変更も直接監視できます // 2 回印刷します (即時のため) この.obj.a = 2 // オブジェクト プロパティの追加を監視できません // 一度印刷すると、印刷結果は新しく追加されたプロパティを持つオブジェクトになります // つまり、即時であるため 1 回だけ実行され、{a:1,b:2} が印刷されます この.obj.b = 2 // 監視はトリガーできますが、変更は監視できません // 2 回印刷され、両方の値は {a:2} であり、変更を反映できません this.$set(this.obj, 'a', 2) } } (4)リスニングアレイ
エクスポートデフォルト{ データ() { 戻る { 編曲: [1] } }, 時計: 編曲: { ハンドラ(newVal, oldVal) { console.log('新規:', newVal) console.log('古い:', 古い値) }, 即時: 真 } }, 作成された() { // 監視可能 --- 配列全体を直接割り当てる this.arr = [2] // 監視できません --- インデックスの割り当て、長さの変更 this.arr[1] = 2 this.arr[0] = 2 この.arr.長さ = 2 // 監視をトリガーできますが、変更を監視することはできません => 新しい値と古い値は同じです this.arr.push(2) this.$set(this.arr, 0, 2) } } 02. 計算プロパティ(1)属性計算のための設定法
計算: { フルネーム: 得る () { `${this.firstName} ${this.lastName}` を返します。 }, 設定(値) { const names = val.split(' '); this.firstName = 名前[0]; this.lastName = names[names.length - 1]; } } }
(2)違い
(3)利用シナリオ
以上がvue WatchとComputedの使い方の詳しいまとめです。vue WatchとComputedの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル
>>: Dockerでnginxをデプロイし、設定ファイルを変更する方法
序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...
目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...
最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...
目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...
この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...
多くの友人が、Docker でプロジェクトを実行する方法をずっと知りたがっていました。今日は、自分の...
序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...
Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...
vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...