Vue日付制御（el-date-picker）エコー異常とその主成分分析

最近、プロジェクトでelement-ui + vueを使用して新しい関数を作成しました。データの追加と変更のポップアップレイヤーとして、element-ui diolagを使用しました。Diolagは、最初の選択後にel-date-Picker日付コントロールを使用しました。が追加されても、再度追加または変更されても、日付エコーを再選択してもビューの表示時間は変更されませんが、その値は更新されています。

 代码如下：

<el-date-picker v-model="rentalForm.rentSd"  type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:150px"/>
// js 部分
showRentail(row){
      if(row){
        this.rentalForm.rentSd = row.rentSd;
      }else{
        this.rentalForm.rentSd = '';
      }
      this.dialogRentalVisible = true;
      this.$nextTick(() => {
        this.$refs['rentalForm'].clearValidate();
      })
}

データは実際に日付ボックスにエコーバックされ、インターフェイスは次のように表示されます。例：元の日付は次のとおりです：2020-09-29

ここに画像の説明を挿入

ただし、この時点で日付ボックスをクリックして日付を変更します。たとえば、2020-09-09、日付ボックスの値は変更されません。フォームの対応する値は2020-09-09に更新されています。次のように：

ここに画像の説明を挿入

また、データに初期値が定義されていても、日付ボックスの表示時間は変わりません。

関連情報を調べた後、私は公式ウェブサイトでこの段落を見つけました：

インスタンスの作成後に新しい属性がインスタンスに追加された場合、ビューの更新はトリガーされません。

つまり、新しい属性を追加したり、データで宣言または割り当てられたオブジェクトまたはオブジェクトの配列の値を変更したりする場合、Vueはその属性の変更を検出できず、ビューの更新をトリガーできません。
理由を調査してください：ES5の制限により、Vueはオブジェクトプロパティの追加または削除を検出できません。Vue.jsはインスタンスを初期化するときにプロパティをgetter / setterに変換するため、Vueがプロパティを変換して応答性を高めるには、プロパティがデータオブジェクト上にある必要があります。
この状況を処理するために、$ set（）メソッドを使用できます。このメソッドは、属性を追加し、ビューの更新をトリガーできます。
$ set（ターゲット、キー、値）

ターゲット：変更するデータソース（オブジェクトまたは配列の場合があります）
変更するキー固有のデータ（インデックス）
値の再割り当てされた値

これは：

if(row){
   this.$set(this.rentalForm, "rentSd", row.rentSd);
}else{
   this.$set(this.rentalForm, "rentSd", "");
}

$ set（）は更新をトリガーできるため、原則は次のとおりです。

各コンポーネントインスタンスには、対応するウォッチャーインスタンスオブジェクトがあります。これは、コンポーネントのレンダリングプロセス中に属性を依存関係として記録し、依存関係のセッターが呼び出されると、ウォッチャーに再計算するように通知します。これにより、関連するコンポーネントを更新されました。

ここに画像の説明を挿入

setメソッドのソースコードを確認します（プロジェクトルートディレクトリvue \ node_modules \ vue \ src \ core \ observer \ index）

ここに画像の説明を挿入

アレイ

ここでは、target.splice（key、1、val）が直接呼び出されます。配列オブジェクトによって提供されるpushやpopなどの7つのメソッドを呼び出すと、ページが再レンダリングされる可能性があり、spliceもその1つです。それによって提供される7つの方法。種

オブジェクト
1.キーが元々オブジェクトの属性であり、キーがオブジェクトプロトタイプの属性ではないかどうかを判別します。これは、このキーがオブジェクトにすでに定義されていることを意味し、値を直接変更するだけで、応答を自動的にトリガーできます。

ここに画像の説明を挿入

VueはObject.definePropertyを使用してオブジェクトをインターセプトします。getがトリガーされると、依存関係が収集されます（ここで収集された依存関係は、レンダリング関数として理解される配列のようなものです）。セットがトリガーされると、依存関係がトリガーされます。。、レンダリング機能にページの再レンダリングを実行させます。では、最初にgetがトリガーされたのはどこですか？実際、これはページが初めてレンダリングされたときにトリガーされます。オブジェクトの属性を再帰的に収集するため、オブジェクトの既存の属性を変更すると、ページが再レンダリングされます。

まずターゲットとして変数OBの値を定義します。OB、どのようなオブジェクトであり、このOBの属性は？Vueはレスポンシブオブジェクトにob属性を追加します。オブジェクトにこのob属性がある場合、そのオブジェクトはレスポンシブオブジェクトであることを意味します。オブジェクトの既存の属性を変更すると、ページレンダリングがトリガーされます。ただし、このオブジェクトがvueインスタンスオブジェクトまたはルートデータオブジェクトの場合、例外警告がスローされます。このオブジェクトが応答しない場合、直接割り当てられて返されます

ここに画像の説明を挿入

3. Setが最終的にレスポンシブオブジェクトを処理する場合、defineReactive（ob.value、key、val）は、新しく追加された属性に依存関係を追加することを意味し、新しい属性が将来直接変更されたときにページレンダリングがトリガーされます。。dep.notify（）コードは、現在の依存関係をトリガーすることを意味します（ここでの依存関係は、レンダリング関数として理解できます）。そのため、ページが再レンダリングされます。

ここに画像の説明を挿入

要約すると、上記は主に、el-date-pickerコンポーネントの問題を解決策を通じて解決し、その動作原理を理解することです。私たちの日常業務では、あらゆる種類の奇妙な問題に遭遇する可能性がありますが、それらを解決した後、それらの根本原因に戻って追跡することは、私たち自身の技術の改善に有益で無害です。

Vue日付制御（el-date-picker）エコー異常とその主成分分析

Vue日付制御（el-date-picker）エコー異常とその主成分分析

おすすめ