详解vue的数据劫持以及操作数组的坑

需要在defineReactive的第一行加上observer(value)。设置值的时候如果是对象的话，也需要将这个对象数据劫持。同理，set那边也需要加这行。

 function defineReactive(obj,key,value){
    // 注意这里！！！！！！！
    observer(value)
    Object.defineProperty(obj,key,{
      get:function(){
        return value
      },
      set:function(newVal){
        // 注意这里！！！！！！！
        observer(newVal)
        console.log('数据更新了')
        value = newVal
      }
    })
  }

继续，如果obj.name=[1,2,3];obj.name.push(4)发现又没有通知了，这是因为Object.defineProperty不支持监听数组变化。所以需要重写数组上面的方法。话说，最近看了个文章，理论上也可以监听数组，但是性能消耗和收益不成正比，所以，vue就没去实现了。

// 把数组上大部分方法重写了，这里不一一列举。但是如果你 [1,2].length--，这是捕捉不到的
  let arr = ['push','slice','split']  arr.forEach(method=>{
    let oldPush = Array.property[method]    Array.property[method] = function(value){
      console.log('数据更新')
      oldPush.call(this,value)
    }
  })

vue使用的时候注意的坑

正如上面的解释，vue2.0的底层约莫是这个逻辑，所以使用需要注意的点：

因为是一开始就数据劫持了。所以后来如果新绑定属性，是没有数据劫持的。如果需要调用 vm.$set(vm.info,’newKey’,’newValue’)，vm是vue的实例。

当属性值是数组，数组变化的时候，跟踪不到变化。因为数组虽然是对象，但是Object.defineProperty不支持数组，所以vue改写了数组的所有方法，当调用数组方法的时候，就调动变动事件。但是不能通过属性或者索引控制数组，比如length，index。

总结：data上，绑定所有属性避免后期加新属性。如果是数组，只能通过数组方法修改数组。如下例子，控制台vm.arr–发现视图并不会变化，vm.arr.push(4)就能变化

 <div id="app">{{msg}}{{arr}}</div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
  let vm = new Vue({
    el:'#app',
    // template加上之后会替换掉#app这个标签
    // template:'<h1>en</h1>',
    data:{msg:'msg',arr:[1,2,3]}
  })
  vm.msg = 'msg'
  </script>

以上所述是小编给大家介绍的vue的数据劫持以及操作数组的坑详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！