浅谈Vue响应式(数组变异方法)-创新互联

前言

很多初使用Vue的同学会发现，在改变数组的值的时候，值确实是改变了，但是视图却无动于衷，果然是因为数组太高冷了吗？

查看官方文档才发现，不是女神太高冷，而是你没用对方法。

看来想让女神自己动，关键得用对方法。虽然在官方文档中已经给出了方法，但是在下实在好奇的紧，想要解锁更多姿势的话，那就必须先要深入女神的心，于是乎才有了去探索Vue响应式原理的想法。(如果你愿意一层一层地剥开我的心。你会发现，你会讶异……　沉迷于鬼哭狼嚎 无法自拔QAQ)。

前排提示，Vue的响应式原理主要是使用了ES5的Object.defineProperty，毫不知情的同学可以查看相关资料。

为啥数组不响应？

仔细一想，Vue的响应是基于Object.definePropery的，这个方法主要是对对象属性的描述进行修改。数组其实也是对象，通过定义数组的属性应该也能产生响应的效果呀。先验证一下自己的想法，撸起袖子就开干。

const arr = [1,2,3];

let val = arr[0];

Object.defineProperty(arr,'0',{
  enumerable: true,
  configurable: true,
  get(){
    doSomething();
    return val;
  },
  set(a){
    val = a;
    doSomething();
  }
});

function doSomething() {

}