溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue中data和data()的區別有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
new Vue({
el: '#app',
data: {
message: 'message'
}
})export default{
data(){
return {
message: 'message'
}
}
}注意：
在大型項目中data會造成數據污染（data是全局的）
將data封裝成一個函數，我們在實例化組件的時候只是調用了這個函數生成的數據副本，這就避免了數據污染。
本文從Vue.js的官方中文文檔來逐行分析看看Vue.js的數據對象——data
官方文檔地址
分析一：
首先，data的類型可以是Object
其次，組件（component）里的定義的data必須是方法類型的，至于為什么接下來會介紹到；
分析二：
在上圖的實例中，app的data對象中有五個屬性，分別是：
newTodoText
visitCount
hideCompletedTodos
todos
error
Vue會把這五個屬性轉化為getter和setter來控制訪問對象app的屬性，以第一個屬性newTodoText為例設置了getter和setter：
分析三：
這個好理解，就是你可以在data中可以定義屬性時在屬性名開頭加上下劃線“_”或者美元符號“$”，就不可以直接訪問，
此時圖一會報錯，顯示 _first is not defined ，圖二才是正確姿勢
分析四：
這就是分析一要解決的問題了，為什么組件（component）里的定義的data必須是方法類型，原因就是在此，在工程中，每個組件都有可能用來被創建多個實例，而這個組件的實例他們的屬性是不能共用的！意思是組件A的屬性改變不能引起組件B的同一屬性改變，結合原型鏈知識很容易就能想清楚
看完了這篇文章，相信你對“vue中data和data()的區別有哪些”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
