Vue 動態數據綁定核心方法

引言

我以前常常使用 Vue，後來不知足於僅僅使用它，我想了解其內部實現原理，因此就嘗試學習其源碼，獲益匪淺。因此，若是你跟我同樣，但願挑戰這高難度的事情，那就開啓這一系列吧！

基本上 MVVM 數據雙向綁定的框架大都採用了大量的 Object.defineProperty 來實現。

Object.defineProperty 語法

---

Object.defineProperty(obj, prop, descriptor)

參數:

obj

      須要定義屬性的對象。

prop

      需定義或修改的屬性的名字。

descriptor

      將被定義或修改的屬性的描述符。

返回值

      返回傳入函數的對象，即第一個參數obj。

描述

---

該方法容許精確添加或修改對象的屬性。通常狀況下，咱們爲對象添加屬性是經過賦值來建立並顯示在屬性枚舉中（for...in 或 Object.keys 方法）， 但這種方式添加的屬性值能夠被改變，也能夠被刪除。而使用 Object.defineProperty() 則容許改變這些額外細節的默認設置。例如，默認狀況下，使用 Object.defineProperty() 增長的屬性值是不可改變的。

對象裏目前存在的__屬性描述符__有兩種主要形式：數據描述符和存取描述符。數據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數功能來描述的屬性。描述符必須是兩種形式之一；不能同時是二者。

數據描述符和存取描述符均具備如下可選鍵值：

configurable

      當且僅當該屬性的 configurable 爲 true 時，該屬性描述符纔可以被改變，也可以被刪除。默認爲 false。

enumerable

      當且僅當該屬性的 enumerable 爲 true 時，該屬性纔可以出如今對象的枚舉屬性中。默認爲 false。

數據描述符同時具備如下可選鍵值：

value

      該屬性對應的值。能夠是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined。

writable

      當且僅當該屬性的 writable 爲 true 時，該屬性才能被賦值運算符改變。默認爲 false。

存取描述符同時具備如下可選鍵值：

get

      一個給屬性提供 getter 的方法，若是沒有 getter 則爲 undefined。該方法返回值被用做屬性值。默認爲 undefined。

set

      一個給屬性提供 setter 的方法，若是沒有 setter 則爲 undefined。該方法將接受惟一參數，並將該參數的新值分配給該屬性。默認爲 undefined。