你是否在项目中出现过修改data数据过后视图并没有改变！我们通过案例为你解答

export default {
  data() {
    return {
      obj: {}
    };
  },
  created() {
    this.obj.name = "性感一颗痣";
  }
};
//console.log(this.obj.name === '性感一颗痣')

让我们换个地方修改obj

export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    this.obj.name = "性感一颗痣";
  }
};
//console.log(this.obj.name === '')

首先，在 Vue 2x 中数据的响应式处理是基于 Object.defineProperty() 的，但是它只会侦听对象的属性，并不能侦听对象。所以，在添加对象属性的时候，通常需要这样

// vue2x添加属性
Vue.$set(object, 'name', wjc)

但是面试的时候面试官问Object.defineProperty()不能监听变化，为什么push、unshift、splice也能触发这就要分析vue源码，在源码中我们发现vue重写监听了push、unshift、splice；

  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    // 重点在这里
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })

放在最后

object.defineproperty 能不能监听数组变化

1、只能监听对象原始的的key

2、对于数组只能监听原始下标

3、数组push不会触发监听 unshift pop shift 可能会触发

vue2源码为什么要重写监听和操作方法？

因为对于数组的每一次操作，都会影响其他key的索引变更，在多数情况需要重写遍历

vue2数组怎么处理的

在数组原型上扩张方法 为新添加的属性添加object.defineproperty