vue--為什么data屬性必須是一個(gè)函數(shù)

pingink 發(fā)布于2019-08-23 15:30 / 2270人閱讀

摘要：所以，組件中的屬性必須是一個(gè)函數(shù)。資源地址為什么屬性必須是一個(gè)函數(shù)我的博客地址如果您對(duì)我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，或郵件給我，共同學(xué)習(xí)進(jìn)步。

歡迎訪問我的個(gè)人博客：http://www.xiaolongwu.cn

前言

老規(guī)矩，我們還是先說為什么。

問題描述：為什么在vue組件中，我們的data屬性必須是一個(gè)函數(shù),new Vue()中的data除外，因?yàn)閚ew Vue中只有一個(gè)data屬性。

原因：因?yàn)槲覀兡艹殡x出來的組件，肯定是具有復(fù)用性的，它在項(xiàng)目中會(huì)存在多個(gè)實(shí)例。如果data屬性值是一個(gè)對(duì)象時(shí)，那么它所有的實(shí)例都會(huì)共享這些數(shù)據(jù)，這是很麻煩的事情，你不能確保你的所有實(shí)例中的屬性值都不會(huì)重復(fù)。

我們的期望是，組件的每個(gè)實(shí)例都能獨(dú)立的維護(hù)自己的數(shù)據(jù)。

解決方案

我們都知道，在JavaScript中，函數(shù)具有獨(dú)立作用域快的特點(diǎn)，外部是無法訪問其內(nèi)部的變量。

試想一下，如果我們組件中的data屬性是一個(gè)函數(shù)，他的每個(gè)實(shí)例就會(huì)有自己的作用域空間，也就是獨(dú)立的數(shù)據(jù)，每個(gè)實(shí)例之間不會(huì)相互影響。

所以，組件中的data屬性必須是一個(gè)函數(shù)。

github資源地址：vue--為什么data屬性必須是一個(gè)函數(shù)

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您對(duì)我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，或郵件給我，共同學(xué)習(xí)進(jìn)步。

郵箱：[email protected]

云服務(wù)器 GPU云服務(wù)器 vue是什么 vue是什么軟件 data屬性 vue實(shí)例屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102144.html

相關(guān)文章

VUE

摘要：注意指令前面需要加，對(duì)指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實(shí)現(xiàn)自定義指令注冊(cè)完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面庫(kù)。集中實(shí)現(xiàn)MVVM 的 VM層。容易與其他庫(kù)或項(xiàng)目整合通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)，數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動(dòng)的視圖，普通的HTML模板中使用特殊的語(yǔ)...

bergwhite 2019-08-19 18:39 評(píng)論0 收藏0
JavaScript從初級(jí)往高級(jí)走系列————MVVM-Vue

摘要：原文博客地址如何理解如何實(shí)現(xiàn)是否解讀過的源碼與框架的區(qū)別實(shí)現(xiàn)實(shí)現(xiàn)獨(dú)立初始化實(shí)例兩者的區(qū)別數(shù)據(jù)和視圖的分離，解耦開放封閉原則，對(duì)擴(kuò)展開放，對(duì)修改封閉在中在代碼中操作視圖和數(shù)據(jù)，混在一塊了以數(shù)據(jù)驅(qū)動(dòng)視圖，只關(guān)心數(shù)據(jù)變化，原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何實(shí)現(xiàn) MVVM 是否解讀過 ...

codercao 2019-08-23 13:46 評(píng)論0 收藏0
javascript高級(jí)學(xué)習(xí)總結(jié)（二）

摘要：那個(gè)率先改變的實(shí)例的返回值，就會(huì)傳遞給的回調(diào)函數(shù)。函數(shù)對(duì)函數(shù)的改進(jìn)，體現(xiàn)在以下四點(diǎn)內(nèi)置執(zhí)行器。進(jìn)一步說，函數(shù)完全可以看作多個(gè)異步操作，包裝成的一個(gè)對(duì)象，而命令就是內(nèi)部命令的語(yǔ)法糖。中的本質(zhì)就是沒有的隱藏的組件。 1、原型 - jquery使用showImg(https://segmentfault.com/img/bVbwNcY?w=692&h=442);注釋 : 實(shí)例雖然不同，但是構(gòu)...

Songlcy 2019-08-26 10:58 評(píng)論0 收藏0
Vue組件定義

摘要：組件結(jié)構(gòu)基礎(chǔ)知識(shí)屬性屬性維護(hù)一個(gè)組件內(nèi)部狀態(tài)，其余組件正常情況下不可見。方案選擇單文件一行的簡(jiǎn)單結(jié)構(gòu)常規(guī)的選擇前邊兩種方案解決不了時(shí)候的選擇靈活性高注意不論選擇哪一種方案，定義模板時(shí)，一定要有一個(gè)非標(biāo)簽元素作根，有且僅有一個(gè)。簡(jiǎn)介組件是可復(fù)用的 Vue 實(shí)例。本質(zhì)上是一個(gè)對(duì)象，該對(duì)象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬...

imtianx 2019-08-23 10:41 評(píng)論0 收藏0
Vue.js非常重要之組件

摘要：它們之間必然需要相互通信父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這是由使用的父組件決定的。 Vue.js的組件注冊(cè)組件全局注冊(cè) 要注冊(cè)一個(gè)全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 評(píng)論0 收藏0