開発に 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析
>>: LDAP ユーザー認証を使用するように Linux を構成する方法
目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
目次1. 穴に落ちる2. 無駄な努力3. 若さの衝動4. 希望の光5. 問題KO 6. 追記1. 穴...
はじめに: 時間ポイントによる MySQL データベースの復旧どの企業にとっても、データは最も価値の...
図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...
コードをコピーコードは次のとおりです。 <span style="font-fami...
<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...
クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...
Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...
概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...
このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...
目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...
1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...