1.vue会监视data中所有层次的数据.

vue对于配置在data中的所有对象都会以key值作为目标进行监视，不论多少层，都会递归地为每一个key配置getter和setter(通过Object.defineProperty())。

相关阅读 MDN关于defineProperty的说明

2.如何监测对象中的数据?

通过setter实现监视,且要在new Vue时就传入要监测的数据，即在data中提前配置。

(1).对象中后追加的属性,Vue默认不做响应式处理

直接通过修改vm._data或者vm来添加key，并不会配置getter和setter，因此不会做响应式

(2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,key/index,value)或vm.$set(target,key/index,value)（可以同时修改数组和对象）

​ 特别注意: Vue.set()和vm.$set()不能直接给vm或vm的根数据对象(vm._data)添加属性!!!

3.如何监测数组中的数据?

在数组中直接通过索引的方式修改数组并不会引起Vue的响应，那么要如何做呢？Vue通过包裹数组更新元素的方法(对原数组方法进行修改)实现,本质就是做了两件事:

(1). 调用原生对应的方法对数组进行更新.

(2). 重新解析模板,进而更新页面.

就包裹了下面的七种数组方法：

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

也就是说，通过上面七种方法修改数组，会让Vue做出响应。

例如想要修改数组中索引为0的位置的数据，可以通过 vm.data.arr.splice(0,0,val)或Vue.set(vm.data.arr,0,val)又或者vm.$set(vm.data.arr,0,val)，在具体的由Vue管理的方法中this指向的应该就是vm！！

数据劫持

Vue通过setter,getter对数据进行动态监测，其实就是“劫持”了数据😯