Vue中的Data集合是Vue實例的核心之一。它是一組可以輸入到模板中顯示的響應式屬性。在Vue實例創建之前,即在new Vue()之前聲明data集合,該集合會變成響應式的。這使我們有能力觀察到data集合屬性的變化并與之交互。以下是關于Vue Data集合的一些示例。
let data = { count: 0 };
// 創建 Vue 實例let vm = new Vue({
el: '#vue-instance',
data: data
});
vm.$data === data; // 為真
vm.$el === document.getElementById('vue-instance'); // 為真
// $watch 是實例某個屬性變化后自動執行的回調函數
vm.$watch('count', function(newValue, oldValue) {
// 這里是回調函數
});
在上面的代碼中,創建了一個簡單的data集合,這個集合只有一個初始值。接下來創建了Vue實例,并將data集合和DOM元素綁定。通過將data集合添加到Vue實例中,現在data集合已經具有了Vue的響應性。在vm.$data === data語句中,我們可以看到vm.$data代表與Vue實例關聯的data集合。通過這種方式,我們可以在Vue實例中訪問data集合的屬性。同樣,vm.$el代表與Vue實例關聯的DOM元素。如果您可以在瀏覽器控制臺中運行上述代碼,則可以看到這是如何實現的。
最后,我們通過$watch來創建一個響應式回調函數,該函數在特定屬性發生變化時自動執行。在這個例子中,回調函數被綁定到count屬性。每次count屬性更改時,Vue將自動調用回調函數,并將新值和舊值傳遞給此函數。通過這種方式,我們可以處理屬性變化并做出相應的響應。