前言

很多初使用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()方法嗎？ 好可怕好可怕，簡直嚇死勞資了。

雖然你想象中的女神可能會這種姿勢，但是你眼前的這個女神確實不是這種姿勢的，像我這種