vueでのデータの変更、ビューの更新を強制し、ビューが更新されない理由と解決方法

645 ワード

方法1,Object.assign
オブジェクト変更:oldObj = Object.assign({},newObj);原理:オブジェクトは参照タイプであり、oldObjの属性指向アドレスを直接変更しても変化しないため、vueは必ずしも監視できるとは限らないので、オブジェクトを新規作成してoldObjフィールドに値を割り当てると、その指向アドレスを直接変更します.
方法2,vue.set
オブジェクトも配列も使えます
this.$set(this,'oldObj',newObj);
this.$set(this,'oldArray',newArray);

例えば、dataのsome: { name: { a: 1, b: 3 } }のbの値を変更するには、
this.$set(this.some.name,‘b’,2)
Vueは、作成するインスタンスに新しいルート応答式属性を動的に追加することは許されないが、vueを使用することができる.setメソッドは、ネストされたオブジェクトに対応するプロパティを追加します.
方法3 updateを使用するthis.$forceUpdate()、強制ビュー更新