[vue开発问题-解决方法](七)Vueはオブジェクト属性の追加や削除を検出できず、vueは配列の変动を検出できない...

2378 ワード

JavaScriptの制限のため、Vueはオブジェクト属性の追加または削除を検出できません.
vue実装データの双方向バインディングには、通常のJavaScriptオブジェクトをVueインスタンスのdataオプションに渡すと、Vueはこのオブジェクトのすべての属性を遍歴し、Objectを使用します.defineProperty()は、これらのプロパティをすべてgetter/setterに変換します.各コンポーネントインスタンスには対応するwatcherインスタンスオブジェクトがあり、コンポーネントレンダリング中にプロパティが依存として記録され、依存項目のsetterが呼び出されるとwatcherに再計算を通知し、関連するコンポーネントが更新されます.データdataの変化を実現してビューviewを更新します.
オブジェクトのプロパティがdataに宣言されていない場合、彼は応答式ではありません.Vueはインスタンスの初期化時にgetter/setter変換プロセスを実行するため、このオブジェクト属性は応答式である.このプロセスを実行するにはdataで宣言する必要があります.
var vm = new Vue({
    data:{
        a:1// vm.a     

    }
})
vm.b = 2;// vm.b      

この問題を解決するにはVueが必要だ.set(object,key,value)またはvm.$setメソッド(グローバルVue.setメソッドの別名)
Vue.set(vm.someObject, 'b', 2);
//  
this.$set(this.someObject,'b',2);

JavaScriptの制限のため、Vueは次の変更の配列を検出できません.*インデックスを使用して直接アイテムを設定する場合、たとえば:
vm.items[indexOfItem] = newValue;
  ---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

 
*配列の長さを変更すると、次のようになります.
vm.items.length = newLength;

---->
vm.items.splice(newLength)

 
転載先:https://www.cnblogs.com/qiuyueding/p/9202835.html