更新修正------ 

在工作中进行Vue框架使用中,总是会遇见数组不触发更新问题,因此在原来的基础上添加了官网上的代码和评论补充的代码。

官网中提到两种情况(数组更新无法触发):

# 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength
//官网代码
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

 1. 解决第一类问题vm.items[indexOfItem] = newValue

//解决第一类问题有两种方法和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

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

// 2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue) //修改原数组

// 3. vm.$set   是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)

2. 解决第二类问题vm.items.length = newLength

// splice
vm.items.splice(newLength)

3. 原文修改(新方法添加比对)

要求每一次数组的变化都触发数组更新(watch 触发)

//这是原来的错误(?啰嗦麻烦)的栗子
watch:{
        "list"(){
                console.log("触发数组变化")
         },
}
methods中:
change(){
          for(let i=0;i<this.list.length;i++){ 
              this.list[i] = "11111"; // 直接用this.list[i]=1 不会触发数组更新
              this.$set(this.list, this.list[i], "11111")// 后两个参数与上一句效果相同
          }
          console.log(this.list);
},

 修改后:


    data: {
        list:['2',3,4,5]
    },
    watch:{
       // 评论提到的首次加载  数组触发
       'list':{
            immediate: true, // immediate选项可以开启首次赋值监听
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
                console.log("触发数组更改")
            }
        },
    },
    methods:{
       //除了fill方法外,每一个语句都能触发更新watch
        change(){
            //this.list.splice(7);
            //this.list.fill("0")  //数组初始化(用新语法代替for循环)
            //this.list.splice(1,1,'sdadasdada')
            //Vue.set(this.list,0,'22322424')
            this.$set(this.list,1,'22322424')
        }
    }

 

 

Logo

前往低代码交流专区

更多推荐