常见但被忽略的VUE数据更新检测

CHICAGO
2,470 阅读2分钟

想必很多人在适用VUE的时候会遇到这样一个问题，当你在使用一个数组或者是对象时，并且你对这个数组或者对象进行了修改，却发生视图没有发生变化，这时该如何去解决，使视图发生变化呢？？

数组更新检测

变异方法：

vue将被侦听的数组的变异方法进行了包裹，所以它们也将会触发到视图更新，这些被包裹的方法包括有：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

替换数组（非变异）

例如 filter() 、concat() 、slice()，它们不会改变原始数组，而是返回一个新的数组。当使用这些非变异方法时，可以使用新数组去替换就数组

vm.items = vm.items.filter(function(item){  // vm为Vue实例
    return item.match(/Foo/)
})

这样可以触发到视图更新

But！！！

由于Js的限制，vue不能检测以下数组的变动

  • 当你利用索引直接设置一个数组项时，例如 vm.items[index] = newVal
  • 当你修改数组的长度时，例如 vm.items.length = newLength

var vm = new Vue({
    data:{
        items:['a','b','c']
    }
})
vm.items[1] = 'A' // 不是响应式的，不会触发视图更新
vm.items.length = 2 // 不是响应式的，不会触发视图更新

解决第一类问题，可以通过以下两种方式

// Vue.set
Vue.set(vm.items,index,newVal)
vm.$set(vm.items,i,newVal)

// Array.prototype.splice
vm.items.splice(index,1,newVal)
vm.items.splice(newLength)


对象变更检测

与数组一样，由于Js的一些限制，vue不能检测到对象属性的添加或者删除（对象结构改变）

var vm = new Vue({
    data:{
        a:1
    }
})
// vm.a 是响应式的

vm.b = 2
// vm.b 不是响应式的

对于已经创建的实例，vue不允许动态添加根级别的响应式属性，但是，可以使用Vue.set(object,prototypeName,value)的方式向嵌套对象添加响应式属性

var vm = new Vue({
    data:{
        userProfile:{
             name:'Rex'   
        }
    }
})

当你想添加一个新的age属性到userProfile对象中时，你可以

Vue.set(vm.userProfile,'age',27) // 响应

vm.$set(vm.userProfile,'age',27) // 响应

有时候，你可能会遇到需要为已有对象赋值多个新属性，比如使用Object.assign()或者 x.extend()。这种情况下，你应该用两个对象的属性创建出一个新的对象，所以，如果想要让新属性也是响应式，你应该这样去实现

vm.userProfile = Object.assign({},vm.userProfile,{
    age:27,
    job:'前端工程师'
})



以上这些情况都是我们在操作数据的时候经常涉及到的，VUE官网有明确的知识点，但其实会被粗心的忽略掉，所以大家在使用VUE的时候，应该多多的去浏览一下官网


扫码关注公众号，每日更新前端小知识



avatar
文章
阅读
粉丝