4.1.1　數(shù)據(jù)

data：在Vue實(shí)例中初始化的data中的所有數(shù)據(jù)會(huì)自動(dòng)進(jìn)行監(jiān)聽綁定，然后可以在View中通過使用兩個(gè)大括號(hào)來綁定data中的數(shù)據(jù)。

代碼如下：

運(yùn)行效果如圖4-1所示。

圖4-1　data運(yùn)行效果圖（一）

在后面的代碼中，只要通過app.message='XX'，即可進(jìn)行視圖的實(shí)時(shí)更新，使用起來很簡單。

提示：data中的數(shù)據(jù)都是淺拷貝。這意味著，如果修改原來的對(duì)象也會(huì)改變data，從而觸發(fā)更新事件。

    var info = { a: 1 }
    var app = new Vue({
       el: '#app',
       data: infor
    })
       infor.a = 3       //使得data.a = 3，這里也會(huì)觸發(fā)數(shù)據(jù)監(jiān)聽，從而更新視圖
       app.a = 2         //使得info.a = 2，同樣會(huì)觸發(fā)數(shù)據(jù)監(jiān)聽

在組件的使用過程中也可以使用data，需要注意以下幾點(diǎn)。

（1）data的值必須是一個(gè)函數(shù)，并且返回值是原始對(duì)象。如果傳給組件的data是一個(gè)原始對(duì)象，則在建立多個(gè)組件實(shí)例時(shí)，它們就會(huì)共用這個(gè)data對(duì)象，修改其中一個(gè)組件實(shí)例的數(shù)據(jù)就會(huì)影響其他組件實(shí)例的數(shù)據(jù)。

（2）data中的屬性和props中的不能重名。

運(yùn)行效果如圖4-2所示。

圖4-2　data運(yùn)行效果圖（二）