vue 學習筆記（持續更新）

其實學習vue最好的辦法就是看vue的官方文檔，因此我寫這個主要是想記錄下學習的心路歷程[手動滑稽]，順便加深下印象。

#數組或者對象的屬性更新，但視圖未發生變化

• 這個是一個比較值得注意的點，官方文檔是這樣描述的

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

• 也就是說對於數組的操做直接對下標進行操做，vue自身'感知/監控'不到的(具體緣由稍後解釋)，須要主動的去'通知'，經過vue自身實現的一個Vue.$set()

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

• 那麼爲何set方法就是可行的？查找vue 的api文檔vue_set這樣的一段描述

向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 (好比 this.myObject.newProperty = 'hi')

注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。

• 咱們首先須要瞭解的是Vue 響應式原理的實現

  • 個人理解是vue將傳進去的data對象進行遍歷，而且利用Object.defineProperty方法將這些屬性轉化爲getter/setter,即將數據描述符轉化爲存取描述符。

Object.defineProperty 是僅 ES5 支持，且沒法 shim 的特性，這也就是爲何 Vue 不支持 IE8 以及更低版本瀏覽器的緣由。

• 簡單的來講就是在頁面渲染的過程當中，頁面的某一部分a使用到 或者是 計算屬性中用到了data中的數據b,其實就是調用了getter函數，通知watcher會將b做爲a的依賴，一但數據b發生改變其實就是調用了setter，而setter的變化會通知到watcher，進而從新渲染視圖。

到此，這個問題基本上就有答案了。

• 將數組的下標看成看成對象的屬性進行類比，當咱們添加屬性並賦值時，Vue 並不能檢測到對象中屬性的添加或者刪除，可是data中對應的屬性確實是變化了，可是這個過程Vue是不能夠監控的，須要主動的去通知Vue 將這個屬性轉化爲 __boserver__類型的（vue能夠動態響應的數據類型）

補充

Object.observe() 方法用於異步地監視一個對象的修改。當對象屬性被修改時，方法的回調函數會提供一個有序的修改流。然而，這個接口已經被廢棄並從各瀏覽器中移除。你能夠使用更通用的 Proxy 對象替代。
Object.observe(obj, callback[, acceptList])

• callback 當對象被修改時觸發的回調函數，其參數爲:

• changes 一個數組，其中包含的每個對象表明一個修改行爲。每一個修改行爲>的對象包含:

  • name: 被修改的屬性名稱。
  • object: 修改後該對象的值。
  • type: 表示對該對象作了何種類型的修改，可能的值爲"add", "update", or "delete"。
  • oldValue: 對象修改前的值。該值只在"update"與"delete"有效。
• acceptList 在給定對象上給定回調中要監視的變化類型列表