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 を構成する方法

推薦する

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

MySQL マスター/スレーブ データベース同期構成と一般的なエラー

アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...

MySQLの起動と接続方法の例分析

目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...

RedHat 6.5 に MySQL 5.7 をインストールするための詳細なチュートリアル

RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...

テーブルの追加と削除の操作を実装する js

この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...

テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

テーブル内の min-width と max-width プロパティの設定 <テーブル>...

Tomcat マルチレイヤーコンテナの設計に関する簡単な説明

目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

Jenkins でユーザー ロールの権限を設定する方法

Jenkinsのユーザーロール権限の設定には、ロール戦略プラグインのインストールが必要です。 1.ロ...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

docker-composeの詳細なインストールと使用方法

Docker Compose は、複雑なアプリケーションを定義および実行するための Docker ツ...