4.1.1　數據

data：在Vue實例中初始化的data中的所有數據會自動進行監聽綁定，然后可以在View中通過使用兩個大括號來綁定data中的數據。

代碼如下：

運行效果如圖4-1所示。

圖4-1　data運行效果圖（一）

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

提示：data中的數據都是淺拷貝。這意味著，如果修改原來的對象也會改變data，從而觸發更新事件。

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

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

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

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

運行效果如圖4-2所示。

圖4-2　data運行效果圖（二）