[vue开発问题-解决方法](七)Vueはオブジェクト属性の追加や削除を検出できず、vueは配列の変动を検出できない...
2378 ワード
JavaScriptの制限のため、Vueはオブジェクト属性の追加または削除を検出できません.
vue実装データの双方向バインディングには、通常のJavaScriptオブジェクトをVueインスタンスの
オブジェクトのプロパティがdataに宣言されていない場合、彼は応答式ではありません.Vueはインスタンスの初期化時に
この問題を解決するにはVueが必要だ.set(object,key,value)またはvm.$setメソッド(グローバルVue.setメソッドの別名)
JavaScriptの制限のため、Vueは次の変更の配列を検出できません.*インデックスを使用して直接アイテムを設定する場合、たとえば:
*配列の長さを変更すると、次のようになります.
転載先:https://www.cnblogs.com/qiuyueding/p/9202835.html
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