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è)屬性，分別是：
newTodoTextvisitCounthideCompletedTodostodoserror
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-02
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語(yǔ)法示例代碼,需要的朋友可以參考下2023-02-02
vue項(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-06
這篇文章主要為大家介紹了Vue項(xiàng)目的優(yōu)化打包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
antd?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-05
vue音樂(lè)播放器插件vue-aplayer的配置及其使用實(shí)例詳解
本篇文章主要介紹了vue音樂(lè)播放器插件vue-aplayer的配置及其使用實(shí)例詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07