难点一!!!Vueにおける$setの使用原理

JavaScriptの制限により、Vueは配列やオブジェクトの変化を検出できません.それでも、これらの制限を回避し、応答性を保証する方法があります.
オブジェクトの場合:
Vueはpropertyの追加または削除を検出できません.Vueはインスタンスの初期化時にpropertyに対してgetter/setter変換を実行するため、Vueを応答式に変換するにはdataオブジェクト上にpropertyが存在する必要があります.

var vm = new Vue({
     
  data:{
     
    a:1
  }
})

// `vm.a`      

vm.b = 2
// `vm.b`       

すでに作成されたインスタンスの場合、Vueはルート・レベルのレスポンス・プロパティを動的に追加できません.ただし、Vueは使用可能である.set(object,propertyName,value)メソッドは、ネストされたオブジェクトに応答式propertyを追加します.たとえば、次のようになります.

Vue.set(vm.someObject, 'b', 2)

vm.$も使用できます.setインスタンスメソッド、これもグローバルVueである.setメソッドの別名:

this.$set(this.someObject,'b',2)

配列の場合
Vueは次の配列の変動を検出できません.

                ，  ：vm.items[indexOfItem] = newValue
          ，  ：vm.items.length = newLength

例を挙げます.

var vm = new Vue({
     
  data: {
     
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' //       
vm.items.length = 2 //       

第1の問題を解決するために、以下の2つの方法はvmと実現することができる.items[indexOfItem]=newValueは同じ効果で、応答システム内でステータス更新をトリガーします.

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

vm.$も使えますグローバルメソッドVueであるsetインスタンスメソッド.setの別名:

vm.$set(vm.items, indexOfItem, newValue)

2つ目の問題を解決するにはspliceを使用します.

vm.items.splice(newLength)