Vue の計算プロパティとプロパティリスニングについての簡単な説明

Vue の計算プロパティとプロパティリスニングについての簡単な説明

1. 計算プロパティ

意味

  • 計算されたプロパティ: 使用するプロパティが存在しないため、既存のプロパティから計算する必要があります。計算されたプロパティには、計算された新しい構成項目が必要です。
  • Vue の場合、data 内のデータは属性です。Vue 内のデータが変更される限り、テンプレートは再解析され、補間構文内のメソッドが再度呼び出されます。

原理

  • 基になるレイヤーは、Object.defineproperty メソッドによって提供されるゲッターとセッターを使用します。

get 関数はいつ実行されますか?

  • これは最初の読み取り中に 1 回実行されます。
  • 依存データが変更されると再度呼び出されます。

利点

  • メソッドの実装と比較すると、内部キャッシュ メカニズム (再利用) があり、より効率的でデバッグが容易です。

述べる

  • 計算されたプロパティは最終的に vm (Vue インスタンス) に表示され、直接読み取って使用できるようになります。
  • 計算プロパティを変更する場合は、変更に対応するセット関数を記述する必要があり、計算が依存するデータをセット内で変更する必要があります。

構文: 1. 省略形:

 計算: {
     「計算されたプロパティ名」() {
         「値」を返す
     }
 }

要件: 2つの数字の合計を計算し、ページに表示する

<テンプレート>
  <div>
    <p>{{ 数値 }}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ(){
    戻る {
      10,
      20歳
    }
  },
  // 計算されたプロパティ:
  // シナリオ: 変数の値を別の変数を使用して計算する必要がある/*
    文法:
    計算: {
      計算されたプロパティ名() {
        戻り値}
    }
  */
 // 注: 計算属性とデータ属性はどちらも変数であるため、同じ名前を持つことはできません // 注 2: 関数内で変数が変更された場合、結果は自動的に再計算され、計算結果が返されます: {
    数値(){
      this.a + this.b を返す
    }
  }
}
</スクリプト>

<スタイル>

</スタイル>

文法: 2. 文章を完成させる:

計算プロパティは構成オブジェクトの形式で記述されます。オブジェクトではget関数とset関数が使用されます。

get の役割: 誰かが fullName を読み取ると、get が呼び出され、戻り値が計算プロパティの値として使用されます (get は return を書き込む必要があります)

いつ呼び出されますか? 1. fullName が初めて読み取られるとき。 2. 依存するデータが変更された場合。

 得る(){
                console.log('get が呼び出されました')
                // console.log(this) // this は vm (Vue インスタンス) です
                this.firstName + '-' + this.lastName を返します
            },
            

set: 計算プロパティの値が変更されると、呼び出されたパラメータは渡された新しい値を受け取ります。

  ...
  計算:{
      フルネーム:
          //get の機能は何ですか?誰かが fullName を読み取ると、get が呼び出され、戻り値が fullName の値として使用されます。//get はいつ呼び出されますか? 1. fullName が初めて読み取られるとき。 2. 依存するデータが変更された場合。
          得る(){
              console.log('get が呼び出されました')
              // console.log(this) // これはvmです
              this.firstName + '-' + this.lastName を返します
          },
          //set はいつ呼び出されますか? fullName が変更されたとき。
          設定(値){
              console.log('set',値)
              定数 arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})    

2. モニタリング(リスニング)特性

<!-- イベントをバインドする場合: @xxx="yyy" yyy はいくつかの簡単なステートメントを記述できます -->
<button @click="isHot = !isHot">天気を切り替える</button>

1. 監視属性の監視:

監視対象の属性が変更されると、ハンドラコールバック関数が自動的に呼び出され、関連する操作が実行されます。

監視対象の属性は、監視する前に存在している必要があります。 !

      ...
      // 記述方法 1. ishot 属性をリッスンするためのウォッチ構成を渡します。watch:{
          ホット:{
              immediate:true、//初期化中にハンドラを呼び出す //ハンドラはいつ呼び出されますか? isHot が変化するとき。
              
              ハンドラー(新しい値、古い値){
                  console.log('isHot が変更されました', newValue, oldValue)
              }
          }
      }
  })
  
  
  // 方法 2. vm.$watch('isHot',{ を介して監視する
   immediate:true, //初期化中にハンドラを呼び出す。デフォルトは false
   // ハンドラはいつ呼び出されますか? isHot が変化するとき。
   handler(newValue,oldValue){ // パラメータは2つあり、1つは新しい値、もう1つは古い値です。 console.log('isHot が変更されました',newValue,oldValue)
   }
})

2. 徹底的な監視

ディープモニタリング:

  • 1) デフォルトでは、Vue のウォッチはオブジェクト (1 つのレイヤー) の内部値の変化を監視しません。
  • 2) deep:true を設定すると、オブジェクトの内部値の変化を監視できます(マルチレイヤー)。

述べる:

  • 1) Vue 自体はオブジェクトの内部値の変化を監視できますが、Vue が提供するウォッチはデフォルトではそれができません。
  • 2) ウォッチを使用する場合、データの具体的な構造に基づいてディープモニタリングを使用するかどうかを決定します。
データ:{
	isHot:true、
	数字:
		a:1、
		1:1 1:1
	}
},
時計:{
	// マルチレベル構造内の特定の属性の変更を監視します (元の記述方法では引用符を追加する必要があり、省略形は省略できますが、この場合は追加する必要があります。そうしないとエラーが報告されます)
	/* '数値.a': {
		ハンドラ(){
			console.log('a が変更されました')
		}
	} */
	// マルチレベル構造番号内のすべての属性の変更を監視します:{
		deep:true, // これが有効になっていない場合、監視は数値のアドレスが変更されたかどうかになります handler(){
			console.log('数値が変更されました')
		}
	}
}

監視プロパティ - 省略形

監視プロパティに handler() のみがあり、他の構成項目を有効にする必要がない場合は、これを省略できます。

時計:{
	isHot(新しい値、古い値){
		console.log('isHot が変更されました',newValue,oldValue,this)
	}
}

/* vm.$watch('isHot',関数(newValue,oldValue) {
	console.log('isHot が変更されました',newValue,oldValue,this)
}) */

3. 相違点と原則

計算と監視の違い

  • ウォッチは、コンピューティングで実行できるすべての機能を実行できます。
  • watch が完了できる関数は、computed では完了しない可能性があります。たとえば、watch は非同期操作を実行できます。

2つの重要な原則

  • Vue によって管理されるすべての関数は、通常の関数として記述するのが最適です。そのため、 this は vm またはコンポーネント インスタンス オブジェクトを指します。
  • Vue によって管理されないすべての関数 (タイマー コールバック関数、Ajax コールバック関数、Promise コールバック関数など) は、this が vm またはコンポーネント インスタンス オブジェクトを指すように、矢印関数として記述するのが最適です。
時計:{
	firstName(値){
		タイムアウトを設定します(()=>{
			console.log(this) //vueインスタンスオブジェクト。通常の関数が使用されると、Windowが返されます。
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	姓(val){
		this.fullName = this.firstName + '-' + val
	}
}

要約する

これで、Vue の計算プロパティとプロパティ リスニングに関するこの記事は終了です。Vue の計算プロパティとプロパティ リスニングに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 計算プロパティ実装トランスクリプト
  • Vue の計算プロパティ
  • Vue の計算プロパティの紹介
  • Vueは計算プロパティを使用して動的スライダーの作成を完了します
  • Vue 監視プロパティと計算プロパティ
  • Vue の計算プロパティとデータ取得方法
  • Vue の計算プロパティをご存知ですか?
  • Vueの計算プロパティ名ケースの3つの実装方法

<<:  HTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法

>>:  Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

推薦する

Linux 構成で MySQL データベースへのリモート接続が失敗する問題の解決方法

今日は、Linux でリモート アクセス用に MySQL データベースを構成する方法について質問があ...

4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

1. インラインスタイル仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェク...

mysql5.7 リモート アクセス設定

mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...

SQL重複排除方法の概要

SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

Nginxリバースプロキシ設定でプレフィックスが削除される

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

nginx高可用性クラスタの実装プロセス

この記事は主に、nginx 高可用性クラスタの実装プロセスを紹介します。この記事のサンプルコードは非...

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

Baidu Union 環境での広告スキル (グラフィック チュートリアル)

最近、製品部門のユーザーエクスペリエンスチームの学生は、アライアンス環境における広告に関する一連の研...

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...

ボタンを使用してフォームを送信する代わりに、画像を使用してフォームを送信します。

コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...

複雑なSQLクエリを含むMySQLの一般的なSQL文の概要

1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...

Web面接でよくある質問:リフローとリペイントの原理と違い

目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為:再描画再描画を引き...