第3章 Vue實例核心選項

3.1　數據選項

在實例化Vue對象時，需要為Vue的構造函數提供一系列配置信息，代碼如下：

當使用new操作符創建Vue實例時，可以為實例傳入一個選項對象，選項對象中有很多類型的數據，具體內容如下。

3.1.1　data選項

data選項支持Object和Function類型的數據，是Vue實例的數據對象。在Vue中使用遞歸將data的property轉換為getter/setter，從而讓data的property能夠響應數據變化。對象必須是純粹的對象，代碼如下：

當定義組件時，data必須聲明為一個返回初始數據對象的函數。因為組件可能被用來創建多個實例，如果data仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象。通過提供data（）函數，每次創建一個新實例后，可以通過調用data（）函數，返回初始數據的一個全新副本數據對象，代碼如下：

如果在自定義組件中聲明的data的property使用了箭頭函數，那么this不會指向這個組件的實例，不過仍然可以將其實例作為函數的第一個參數訪問，代碼如下：

3.1.2　props選項

props選項的值可以是數組或對象，用于接收來自父組件的數據。props可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

props選項的值如果為對象類型，則對象的語法具體使用如下。

（1）type：值的類型可以是String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構造函數或上述內容組成的數組，可以通過該屬性檢查一個prop是否是指定的類型，否則會拋出警告。

（2）default：值為any類型，為該prop指定一個默認值。

（3）required：值為Boolean類型，定義該prop是否為必填項。

（4）validator：值為函數，自定義驗證函數會將該prop的值作為唯一的參數代入。

props選項代碼如下：

3.1.3　computed選項

computed是計算屬性，其值的類型是一個對象，對象中的屬性值為函數。計算屬性將被混入Vue實例中，所有getter和setter的this上下文自動綁定為Vue實例。如果計算屬性的值為一個箭頭函數，那么this不會指向這個組件的實例，不過仍然可以將其實例作為函數的第一個參數訪問。

計算屬性有以下特點。

（1）模板中放入太多的邏輯會讓模板過重且難以維護，使用計算屬性可以讓模板更加簡潔。

（2）計算屬性是基于它們的響應式依賴進行緩存的。

（3）computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是說多個變量中的某一個值發生了變化則我們監控的這個值也會發生變化。

index.html文件代碼如下：

3.1.4　methods選項

methods用來定義Vue實例中綁定的函數，其值的類型為對象，對象的屬性值必須為函數類型，methods將被混入Vue實例中。可以直接通過vm實例訪問這些函數，也可以在指令中直接使用。函數中的this自動綁定為Vue實例，代碼如下：

3.1.5　watch選項

watch是監聽器，其值為一個對象，對象中的屬性值可以為函數、對象和數組。當data中的一個屬性需要被觀察其內部值的改變時，可以通過watch來監聽data屬性的變化。

watch監聽器的基本語法如下。

（1）使用watch來響應數據的變化。

（2）一般用于異步或者開銷較大的操作。

（3）watch中的屬性一定是data中已經存在的數據。

（4）當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠被監聽到變化，此時需要deep屬性對對象進行深度監聽。

index.html文件代碼如下：