開発に 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 を構成する方法
この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...
アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...
目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...
RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...
この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...
この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...
テーブル内の min-width と max-width プロパティの設定 <テーブル>...
目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...
目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...
Jenkinsのユーザーロール権限の設定には、ロール戦略プラグインのインストールが必要です。 1.ロ...
目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...
Docker Compose は、複雑なアプリケーションを定義および実行するための Docker ツ...