vue中data和data()的區(qū)別說明
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ù)，我們在實(shí)例化組件的時(shí)候只是調(diào)用了這個(gè)函數(shù)生成的數(shù)據(jù)副本，這就避免了數(shù)據(jù)污染。
詳解vue.js中的data
本文從Vue.js的官方中文文檔來逐行分析看看Vue.js的數(shù)據(jù)對象——data
文檔之一
分析一：
首先，data的類型可以是Object
其次，組件（component）里的定義的data必須是方法類型的，至于為什么接下來會(huì)介紹到；
文檔之二
分析二：
在上圖的實(shí)例中，app的data對象中有五個(gè)屬性，分別是：
newTodoTextvisitCounthideCompletedTodostodoserror
Vue會(huì)把這五個(gè)屬性轉(zhuǎn)化為getter和setter來控制訪問對象app的屬性，以第一個(gè)屬性newTodoText為例設(shè)置了getter和setter：
文檔之三
分析三：
這個(gè)好理解，就是你可以在data中可以定義屬性時(shí)在屬性名開頭加上下劃線“_”或者美元符號“$”，就不可以直接訪問，
此時(shí)圖一會(huì)報(bào)錯(cuò)，顯示 _first is not defined ，圖二才是正確姿勢
文檔之四
分析四：
這就是分析一要解決的問題了，為什么組件（component）里的定義的data必須是方法類型，原因就是在此，在工程中，每個(gè)組件都有可能用來被創(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à)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
卸載vue2.0并升級vue_cli3.0的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級vue_cli3.0的實(shí)例內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下2023-02-02
生產(chǎn)環(huán)境中將項(xiàng)目依賴的一些第三方包替換成通過cdn方式外部加載,而不是打包到 vender,對于提升應(yīng)用的加載、響應(yīng)速度很有意義,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何通過cdn引入資源并配置的相關(guān)資料,需要的朋友可以參考下2022-06-06
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家介紹了Vue項(xiàng)目的優(yōu)化打包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
vue音樂播放器插件vue-aplayer的配置及其使用實(shí)例詳解
本篇文章主要介紹了vue音樂播放器插件vue-aplayer的配置及其使用實(shí)例詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07