唯雪博客

vue数组替换

        写代码就是一个不断踩坑的过程,从开始使用Vue就看到文档关于数组操作的注意事项。但是在实际过程中还是遇不少问题。最近一个业务需求,需要对数组渲染列表进行重新排序,再次好好回顾了一下Vue数组替换这一块的内容。

        唯雪博客

        原理的东西并不是十分头侧,不过可以把解决方法总结一下:

        首先,再次,提醒自己记住:

            由于 JavaScript 的限制,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 // 不是响应性的

        在操作数组的时候原生方法被响应的:

        ## 变异方法

        Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

      • push()

      • pop()

      • shift()

      • unshift()

      • splice()

      • sort()

      • reverse()

         你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' }) 。

        ## 非变异方法

            变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例                如:filter()concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

        
        example1.items = example1.items.filter(function (item) {
              return item.message.match(/Foo/)
        })

            上面已经强调了,利用索引直接设置数组的一个项时,是不被Vue响应的:

            针对这个问题,Vue提供了两种解决办法:

            方式一:

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

            方式二:

            使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
        vm.$set(vm.items, indexOfItem, newValue)

            修改数组的长度:

        vm.items.splice(newLength)

        以上的总结针对数组的处理已经基本够用了,需要注意的是,处理数组中包含的是对象时,注意可能需要Object.assign()  进行一个浅拷贝处理,比如需要交换数组中两个对象的位置;

      Vue.set(changeArr, index,changeArr[index - 1]);
      Vue.set(changeArr, index - 1, Object.assign({}, objTemp));


白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论