浅谈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() {
}

然后在控制台中分别输入arr、arr[0] = 2、arr，可以看到如下图的结果。

咦，一切居然都如预想猜想的一样。

接下来，看到这段代码，有的同学可能会有所疑问，为啥在get()方法里不直接返回this[0]呢？而是要借助val来返回值呢？仔细一想，卧槽！！！差点特么的死循环了，你想呀，get()本身就是获取当前属性的值，在get()里调用this[0]不是等同于再次调用了get()方法吗？ 好可怕好可怕，简直吓死劳资了。

虽然你想象中的女神可能会这种姿势，但是你眼前的这个女神确实不是这种姿势的，像我这种屌丝属性暴露无疑的人怎么可能猜透女神的心思？为什么不这样响应数据呢？或许是因为数组和对象还是有所差别，定义数组的属性可能会产生一些麻烦与Bug。又或许是因为在交互的过程中可能会产生大量的数据，导致整体的性能下降。也有可能是作者权衡利弊之后用其他方法也可以达到数据响应的效果。反正我是猜不透啦。

为啥调用数组原生方法就可以响应了？

为什么使用了这些数组的方法就就能让数据响应了呢？先看看数组部分的源码吧。

简单的来讲，def的作用就是重新定义对象属性的value值。