vue中data和data()的區(qū)別說明
data和data()的區(qū)別
Vue實例中data屬性
new Vue({ ? el: '#app', ? data: { ? ? message: 'message' ? } })
組件化的項目中使用
export default{ ? ? data(){ ? ? ? ? return { ? ? ? ? ? ?message: 'message' ? ? ? ? } ? ? } }
注意:
在大型項目中data會造成數(shù)據(jù)污染(data是全局的)
將data封裝成一個函數(shù),我們在實例化組件的時候只是調(diào)用了這個函數(shù)生成的數(shù)據(jù)副本,這就避免了數(shù)據(jù)污染。
詳解vue.js中的data
本文從Vue.js的官方中文文檔來逐行分析看看Vue.js的數(shù)據(jù)對象——data
文檔之一
分析一:
首先,data的類型可以是Object
其次,組件(component)里的定義的data必須是方法類型的,至于為什么接下來會介紹到;
文檔之二
分析二:
在上圖的實例中,app的data對象中有五個屬性,分別是:
newTodoText
visitCount
hideCompletedTodos
todos
error
Vue會把這五個屬性轉(zhuǎn)化為getter和setter來控制訪問對象app的屬性,以第一個屬性newTodoText為例設(shè)置了getter和setter:
文檔之三
分析三:
這個好理解,就是你可以在data中可以定義屬性時在屬性名開頭加上下劃線“_”或者美元符號“$”,就不可以直接訪問,
此時圖一會報錯,顯示 _first is not defined ,圖二才是正確姿勢
文檔之四
分析四:
這就是分析一要解決的問題了,為什么組件(component)里的定義的data必須是方法類型,原因就是在此,在工程中,每個組件都有可能用來被創(chuàng)建多個實例,而這個組件的實例他們的屬性是不能共用的!意思是組件A的屬性改變不能引起組件B的同一屬性改變,結(jié)合原型鏈知識很容易就能想清楚
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于iview按需引用后使用this.$Modal報錯的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06antd?Vue實現(xiàn)Login登錄頁面布局案例詳解?附帶驗證碼驗證功能
這篇文章主要介紹了antd?Vue實現(xiàn)Login登錄頁面布局案例詳解附帶驗證碼驗證功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05vue音樂播放器插件vue-aplayer的配置及其使用實例詳解
本篇文章主要介紹了vue音樂播放器插件vue-aplayer的配置及其使用實例詳解,具有一定的參考價值,有興趣的可以了解一下2017-07-07