Vue.set() と this.$set() の使い方と違い

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成した後、データを再度割り当てると、ビューに自動的に更新されないことがあります。Vue ドキュメントを確認すると、次のような文が見つかります。「インスタンスの作成後にインスタンスに新しいプロパティを追加しても、ビューの更新はトリガーされません。」 次のコードは学生オブジェクトに年齢属性を追加します。

データ () {
  戻る {
    学生:
      名前: ''、
      性別: ''
    }
  }
}
マウント済み () { //——インスタンスがマウントされた後のフック関数 this.student.age = 24
}

ES5 の制限により、Vue.js はオブジェクト プロパティの追加または削除を検出できません。 Vue.js はインスタンスを初期化するときにプロパティをゲッター/セッターに変換するため、Vue.js がプロパティを変換してレスポンシブにするには、プロパティがデータ オブジェクト上に存在している必要があります。

正しい書き方: this.$set(this.data,"key",value')

マウントされた(){
  this.$set(this.student,"年齢", 24)
}

:: Vue では、ルートレベルのレスポンシブ プロパティを動的に追加することはできません。

例えば:

constアプリ = 新しいVue({
  データ: {
    1: 1
  }
  // レンダリング: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

ネストされたオブジェクトにレスポンシブプロパティを追加するには、Vue.set(object, propertyName, value) メソッドのみを使用できます。たとえば、

var vm = 新しい Vue({
    el:'#テスト',
    データ:{
        //情報ルート属性はデータ内に既に存在します:{
            名前:'シャオミン';
        }
    }
});
//情報に性別属性を追加します Vue.set(vm.info,'sex','男');

Vue.set() と this.$set() の実装原則

まず、Vue.set() のソースコードを見てみましょう。

'../observer/index' から {set} をインポートします

...
Vue.set = 設定
...

this.$set() のソースコードを見てみましょう:

'../observer/index' から {set} をインポートします

...
Vue.prototype.$set = 設定
...

その結果、Vue.set() と this.$set() という 2 つの API の実装原理は基本的に同じであり、どちらも set 関数を使用していることがわかりました。 set 関数は、../observer/index ファイルからエクスポートされます。違いは、Vue.set() は set 関数を Vue コンストラクターにバインドするのに対し、this.$set() は set 関数を Vue プロトタイプにバインドすることです。

関数セット (ターゲット: 配列<any> | オブジェクト、キー: any、値: any): any {
  (process.env.NODE_ENV !== 'production' && の場合
    (isUndef(ターゲット) || isPrimitive(ターゲット))
  ){
    警告(`未定義、null、またはプリミティブ値にリアクティブ プロパティを設定できません: ${(target: any)}`)
  }
  Array.isArray(ターゲット) && isValidArrayIndex(キー) の場合 {
    ターゲットの長さ = Math.max(ターゲットの長さ、キー)
    ターゲット.splice(キー、1、値)
    戻り値
  }
  if (ターゲットのキー && !(Object.prototype のキー)) {
    ターゲット[キー] = 値
    戻り値
  }
  const ob = (ターゲット: 任意).__ob__
  target._isVue の場合、ob と ob.vmCount は次のように記述します。
    process.env.NODE_ENV !== 'production' && 警告(
      'Vue インスタンスまたはそのルート $data にリアクティブ プロパティを追加しないでください ' +
      「実行時 - データ オプションで事前に宣言します。」
    )
    戻り値
  }
  もし (!ob) {
    ターゲット[キー] = 値
    戻り値
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  戻り値
}

set 関数は、target、key、val の 3 つのパラメーターを受け取り、target の値は配列またはオブジェクトであり、公式 Web サイトで指定されている Vue.set() メソッドを呼び出すときに渡されるパラメーターと正確に一致することがわかりました。

参照:

Vue で遭遇する落とし穴 --- 変更検出の問題 (配列関連)

これで、Vue.set() と this.$set() の使い方と違いについての記事は終了です。Vue.set() と this.$set() に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue ソースコードから Vue.set() と this.$set() を解析する
  • Vue.set() this.$set() はビューの更新と考慮をトリガーします
  • Vue.set と this.$set の使い方とシナリオの紹介

<<:  MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析

>>:  LDAP ユーザー認証を使用するように Linux を構成する方法

推薦する

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

時点別のMySQLデータベース復旧実績

はじめに: 時間ポイントによる MySQL データベースの復旧どの企業にとっても、データは最も価値の...

一般的なMysql DDL操作の概要

図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...

システム外のフォント参照とトランジション効果

コードをコピーコードは次のとおりです。 <span style="font-fami...

XHTML と CSS によるオブジェクト指向プログラミング

<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

Centos7.6にTomcat-8.5.39をインストールする方法

Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...

Windows に MySQL をインストールする方法のグラフィック チュートリアル

概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

MySQLが中国語の文字を挿入する問題を永久に解決するコツを教えます

目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...

Blazor における CSS 分離の問題

1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...