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