http://es6.ruanyifeng.com/#do...
undefined和undefined之間也是有區(qū)別的

vue不能檢測(cè)數(shù)組改變 vue提供了一個(gè)set方法

你可以先按你的想法實(shí)現(xiàn)一個(gè)可以監(jiān)控的數(shù)組 而且數(shù)組是可以arr[5]=xxx這種操作 所以這種操作也要被監(jiān)控到

你這個(gè)問題問的好，研究了下，雖然結(jié)果還是不知道，但對(duì)我而言還是有收獲的，這是我的一點(diǎn)心得和思考，希望對(duì)你有幫助

https://segmentfault.com/a/11...

因?yàn)閿?shù)組不方便拓展
你既然測(cè)試了,應(yīng)該發(fā)現(xiàn)這個(gè)問題了啊

let list = []

Object.defineProperty(list, 0, {
  get(){
    console.log('get 0')
    // 如果是對(duì)象,可以給對(duì)象拓展一個(gè)$data,用來存放真正的數(shù)據(jù),但數(shù)組不能.
    // 只能放在別的地方,那顯然不科學(xué),不合理.
    // 如果直接 return this[0],就遞歸了,爆棧
  },
  set (v) {
    console.log('set o', v)
// 直接 this[0] = v,同樣爆棧
  }
})

那就只能看不能用了

我最近剛好寫過Vue的Observer部分源碼分析博客
強(qiáng)答一波...

并不是說 JS 不能支持響應(yīng)式數(shù)組，沒有這種限制，而是一般開發(fā)者使用數(shù)組與使用對(duì)象的方法有區(qū)別。數(shù)組在 JS 中常被當(dāng)作棧，隊(duì)列，集合等數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)方式，會(huì)儲(chǔ)存批量的數(shù)據(jù)以待遍歷。并且編譯器對(duì)對(duì)象與數(shù)組的優(yōu)化也有所不同。

所以對(duì)數(shù)組的處理需要特化出來以提高性能。

Vue 中是通過對(duì) 每個(gè)鍵設(shè)置 getter/setter 來實(shí)現(xiàn)響應(yīng)式的，開發(fā)者使用數(shù)組，目的往往是遍歷，此時(shí)調(diào)用 getter 開銷太大了，所以 Vue 不在數(shù)組每個(gè)鍵上設(shè)置，而是在數(shù)組上定義 __ob__ ，并且替換了 push 等等能夠影響原數(shù)組的原型方法。

至于 length 的問題，你用 Object.keys() 或者 Object.getOwnPropertyNames() 就能獲得所有鍵的名字，前者是所有自有可枚舉的，后者是所有自有的，不需要用 length 。

從源碼可以清晰看到，Vue 跳過了對(duì)數(shù)組每個(gè)鍵設(shè)置響應(yīng)式的過程，而是直接對(duì)值進(jìn)行遞歸設(shè)置響應(yīng)式

export class Observer {
  constructor(value: any) {
    def(value, "__ob__", this);
    if (Array.isArray(value)) {
      // 替換原型（Object.setPrototype 這個(gè)方法執(zhí)行地比較慢，而且支持情況堪憂）
      Object.setPrototypeOf(value, arrayMethods);
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }
  public walk(value: any) {
    for (const key of Object.keys(value)) {
      defineReactive(value, key);
    }
  }
  public observeArray(items: any[]) {
    // 設(shè)置 l = items.length 防止遍歷過程中 items 長(zhǎng)度變化
    for (let i = 0, l = items.length; i < l; i++) {
      // 直接觀察數(shù)組元素，省略在鍵上設(shè)置 getter/setter 的步驟
      observe(items[i]);
    }
  }
}

而且樓主你造嗎？Vue 使用 $watch('arr') 是可以監(jiān)聽多維數(shù)組的，Vue 對(duì)普通對(duì)象和數(shù)組的設(shè)置情況是差異很大的。

另外還有就是樓上有人貼圖

這里面的$set支持設(shè)置數(shù)組+響應(yīng)式非數(shù)字鍵，Vue確實(shí)是這么支持的，然而?。∪绻诔跏蓟瘯r(shí)data里這么干，Vue會(huì)忽略非數(shù)字鍵的，不會(huì)變響應(yīng)式，它這是行為不一致！對(duì)它使用watch，直接修改它不會(huì)變，但修改數(shù)組就會(huì)觸發(fā)。

我早給Vue提issue了，但他們一直不理我。
https://github.com/vuejs/vue/...

歡迎閱讀我博客Vue Observer源碼分析，寫得非常詳細(xì)。
https://segmentfault.com/a/11...