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í)在屬性名開頭加上下劃線“_”或者美元符號(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)文章
Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例，非常具有實(shí)用價(jià)值，感興趣的同學(xué)可以了解一下2017-08-08
這篇文章主要介紹了Vue前端對(duì)axios的封裝和使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
這篇文章主要介紹了Vue中實(shí)現(xiàn)頁(yè)面刷新的5種方法,包括使用$router.go(0)、location.reload()、通過(guò)router-view的key屬性、使用v-if指令手動(dòng)觸發(fā)組件重新渲染,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾?wèn)題
這篇文章主要介紹了ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾?wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-04-04
vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語(yǔ)言，下面這篇文章主要來(lái)和大家講講CodeMirror的應(yīng)用，感興趣的可以了解一下2023-06-06
本文給大家介紹了vue項(xiàng)目中跨域問(wèn)題的完美解決方案，通過(guò)更改header，使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
基于element日歷組件實(shí)現(xiàn)簽卡記錄
這篇文章主要為大家詳細(xì)介紹了基于element日歷組件實(shí)現(xiàn)簽卡記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08