vue組件中data不能是函數(shù)嗎

          來源:php中文網(wǎng) | 2022-12-19 18:06:14 |

          本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。

          vue實(shí)例的時(shí)候定義data屬性既可以是一個(gè)對(duì)象,也可以是一個(gè)函數(shù)


          (資料圖)

          const app = new Vue({    el:"#app",    // 對(duì)象格式    data:{        foo:"foo"    },    // 函數(shù)格式    data(){        return {             foo:"foo"        }    }})

          但,組件中定義data屬性,只能是一個(gè)函數(shù)

          如果為組件data直接定義為一個(gè)對(duì)象

          Vue.component("component1",{    template:`<div>組件</div>`,    data:{        foo:"foo"    }})

          則會(huì)得到警告信息

          警告說明:返回的data應(yīng)該是一個(gè)函數(shù)在每一個(gè)組件實(shí)例中

          為什么data屬性是一個(gè)函數(shù)而不是一個(gè)對(duì)象?

          Vue組件中data屬性不能為對(duì)象原因是對(duì)象是引用類型,組件會(huì)被多個(gè)實(shí)例同時(shí)引用導(dǎo)致的結(jié)果就是多個(gè)實(shí)例共享一個(gè)對(duì)象,其中一個(gè)組件改變了data對(duì)象中的值,其他實(shí)例也會(huì)受到影響。

          如圖所示,組件復(fù)用后,隨機(jī)點(diǎn)擊其中一個(gè)組件中的按鈕其他兩個(gè)組件的數(shù)值也會(huì)受到影響

          vue組件data為函數(shù)的原因:data為函數(shù),通過return返回對(duì)象,可以實(shí)現(xiàn)每個(gè)實(shí)例都有自己獨(dú)立的對(duì)象,實(shí)例之間互不影響;如下圖所示

          結(jié)論

          根實(shí)例對(duì)象data可以是對(duì)象也可以是函數(shù)(根實(shí)例是單例),不會(huì)產(chǎn)生數(shù)據(jù)污染情況

          組件實(shí)例對(duì)象data必須為函數(shù),目的是為了防止多個(gè)組件實(shí)例對(duì)象之間共用一個(gè)data,產(chǎn)生數(shù)據(jù)污染。采用函數(shù)的形式,initData時(shí)會(huì)將其作為工廠函數(shù)都會(huì)返回全新data對(duì)象

          說明:

          vue中組件是用來復(fù)用的,為了防止data復(fù)用,將其定義為函數(shù)。

          vue組件中的data數(shù)據(jù)都應(yīng)該是相互隔離,互不影響的,組件每復(fù)用一次,data數(shù)據(jù)就應(yīng)該被復(fù)制一次,之后,當(dāng)某一處復(fù)用的地方組件內(nèi)data數(shù)據(jù)被改變時(shí),其他復(fù)用地方組件的data數(shù)據(jù)不受影響,就需要通過data函數(shù)返回一個(gè)對(duì)象作為組件的狀態(tài)。

          當(dāng)我們將組件中的data寫成一個(gè)函數(shù),數(shù)據(jù)以函數(shù)返回值形式定義,這樣每復(fù)用一次組件,就會(huì)返回一份新的data,擁有自己的作用域,類似于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間,讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)。

          當(dāng)我們組件的date單純的寫成對(duì)象形式,這些實(shí)例用的是同一個(gè)構(gòu)造函數(shù),由于JavaScript的特性所導(dǎo)致,所有的組件實(shí)例共用了一個(gè)data,就會(huì)造成一個(gè)變了全都會(huì)變的結(jié)果。

          (學(xué)習(xí)視頻分享:web前端開發(fā)、編程基礎(chǔ)視頻)

          以上就是vue組件中data不能是函數(shù)嗎的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

          關(guān)鍵詞: data

          亚洲人JIZZ日本人| 国产亚洲婷婷香蕉久久精品| 亚洲欧美日韩中文无线码| 亚洲免费福利视频| 久久综合亚洲色HEZYO社区| 亚洲色精品aⅴ一区区三区 | 亚洲美女一区二区三区| 久久亚洲AV午夜福利精品一区| 亚洲色偷偷偷鲁综合| 国产亚洲精品激情都市| 中文字幕亚洲一区二区va在线| 日韩在线视精品在亚洲| 亚洲?v无码国产在丝袜线观看| 亚洲第一页综合图片自拍| 国产亚洲精品成人久久网站 | 亚洲av无码专区国产乱码在线观看| 奇米影视亚洲春色| 九月丁香婷婷亚洲综合色| 国产A在亚洲线播放| 亚洲成a人片在线观看日本| 久久久久久亚洲av成人无码国产| 亚洲欧洲免费视频| 亚洲国产精品综合久久2007| 亚洲三级中文字幕| 亚洲日产乱码一二三区别| 亚洲av第一网站久章草| 国产成人精品久久亚洲高清不卡| www国产亚洲精品久久久日本| 亚洲精品tv久久久久久久久久| 亚洲无码日韩精品第一页| 亚洲欧洲∨国产一区二区三区| 亚洲gv猛男gv无码男同短文| 亚洲人成网址在线观看| 亚洲成年人电影网站| 亚洲熟妇无码一区二区三区导航| 久久亚洲精品高潮综合色a片| 亚洲第一区精品观看| 亚洲国产精品无码久久久蜜芽 | 亚洲av永久无码精品秋霞电影秋 | 久久精品国产精品亚洲毛片| 亚洲午夜久久久精品电影院|