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