第3章 Vue實(shí)例核心選項(xiàng)

3.1　數(shù)據(jù)選項(xiàng)

在實(shí)例化Vue對象時，需要為Vue的構(gòu)造函數(shù)提供一系列配置信息，代碼如下：

當(dāng)使用new操作符創(chuàng)建Vue實(shí)例時，可以為實(shí)例傳入一個選項(xiàng)對象，選項(xiàng)對象中有很多類型的數(shù)據(jù)，具體內(nèi)容如下。

3.1.1　data選項(xiàng)

data選項(xiàng)支持Object和Function類型的數(shù)據(jù)，是Vue實(shí)例的數(shù)據(jù)對象。在Vue中使用遞歸將data的property轉(zhuǎn)換為getter/setter，從而讓data的property能夠響應(yīng)數(shù)據(jù)變化。對象必須是純粹的對象，代碼如下：

當(dāng)定義組件時，data必須聲明為一個返回初始數(shù)據(jù)對象的函數(shù)。因?yàn)榻M件可能被用來創(chuàng)建多個實(shí)例，如果data仍然是一個純粹的對象，則所有的實(shí)例將共享引用同一個數(shù)據(jù)對象。通過提供data（）函數(shù)，每次創(chuàng)建一個新實(shí)例后，可以通過調(diào)用data（）函數(shù)，返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象，代碼如下：

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

3.1.2　props選項(xiàng)

props選項(xiàng)的值可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)。props可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項(xiàng)，如類型檢測、自定義驗(yàn)證和設(shè)置默認(rèn)值。

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

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

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

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

（4）validator：值為函數(shù)，自定義驗(yàn)證函數(shù)會將該prop的值作為唯一的參數(shù)代入。

props選項(xiàng)代碼如下：

3.1.3　computed選項(xiàng)

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

計(jì)算屬性有以下特點(diǎn)。

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

（2）計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。

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

index.html文件代碼如下：

3.1.4　methods選項(xiàng)

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

3.1.5　watch選項(xiàng)

watch是監(jiān)聽器，其值為一個對象，對象中的屬性值可以為函數(shù)、對象和數(shù)組。當(dāng)data中的一個屬性需要被觀察其內(nèi)部值的改變時，可以通過watch來監(jiān)聽data屬性的變化。

watch監(jiān)聽器的基本語法如下。

（1）使用watch來響應(yīng)數(shù)據(jù)的變化。

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

（3）watch中的屬性一定是data中已經(jīng)存在的數(shù)據(jù)。

（4）當(dāng)需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠被監(jiān)聽到變化，此時需要deep屬性對對象進(jìn)行深度監(jiān)聽。

index.html文件代碼如下：