VUE中data配置項(xiàng)詳細(xì)解析
1.data是什么?有什么作用?
data是Vue實(shí)例中一個(gè)配置項(xiàng)。用來存儲(chǔ)vue實(shí)例或者組件里面的數(shù)值。
2.data的存在位置差異(data配置項(xiàng)存在于兩種位置)
2.1.當(dāng)data存在于Vue實(shí)例中時(shí),它既可以是以一個(gè)對(duì)象的形式(鍵值對(duì))。
在Vue的data屬性定義以下數(shù)據(jù)類型:
1、字符串
2、整數(shù)
3、數(shù)組
4、對(duì)象
5、對(duì)象數(shù)組
data: { // 定義字符串 name: "谷哥的小弟", // 定義整數(shù) number:9527, // 定義數(shù)組 hobby:["籃球","足球","擊劍"], // 定義對(duì)象 user:{id: 21, name: "zxx", age: 50}, // 定義對(duì)象數(shù)組 users:[ {id: 21, name: "zxx", age: 50}, {id: 22, name: "zxc", age: 51}, {id: 23, name: "zcc", age: 52}, ] }
2.1也可以是一個(gè)函數(shù)的形式。
const app = new Vue({ el:"#app", // 對(duì)象格式 data:{ foo:"foo" }, // 函數(shù)格式 data(){ return { foo:"foo" } }
2.2當(dāng)data存在于組件中時(shí),它只能是一個(gè)函數(shù)
Vue.component('component1',{ template:`<div>組件</div>`, data(){ return { foo:"foo" } } })
3.為什么在組件中data只能是一個(gè)函數(shù)呢?
Vue的官方文檔中也有說組件中的data必須使用函數(shù)否則會(huì)報(bào)錯(cuò),這是為什么呢?
這就要追溯到我們的Jvascript的對(duì)象了,眾所周知Javascript的對(duì)象屬于引用數(shù)據(jù)類型,如果將一個(gè)對(duì)象賦值給另一個(gè)對(duì)象他并不是將該對(duì)象的值賦給新變量,而是在內(nèi)存中將起初申明的對(duì)象去指向這個(gè)新對(duì)象。
let obj = { name: "小明", age:19 } let obj1 = obj obj.name = "小紅" // 此時(shí) obj1.name == "小紅" // 并且 obj.name == "小紅"
這種情況下如果修改obj1中的屬性,obj的數(shù)據(jù)也會(huì)發(fā)生變化
為什么要提到這個(gè)呢 我們就要理解一下組件 其實(shí)就類似原生js的一個(gè)構(gòu)造函數(shù)
我們?nèi)フ{(diào)用的組件就是相當(dāng)于原生js我們?nèi)?shí)例化的對(duì)象加入我們申明一個(gè)構(gòu)造函數(shù) person并改變其中的值
function Person(name,age){ this.name = nmae; this.age = age ; this.race = "漢族" } let ming = new Person("xiaoming",19) let hong = new Person("xiaohong",20) console.log(ming) console.log(hong) // 此時(shí)如果我們把小明的名族改了 ming.race="維吾爾族" console.log(ming) console.log(hong) // 我們?cè)偃ゲ榭匆幌聲?huì)發(fā)現(xiàn),小明小紅都變成了維吾爾族
所以,為了防止對(duì)象的變量修改,在組件的data必須要用函數(shù)的形式存在,因?yàn)橹挥泻瘮?shù)有函數(shù)的封閉作用域,這也就是為什么Vue的設(shè)計(jì)者為什么在組件中使用了一個(gè)data卻再次return了一個(gè)對(duì)象。
總結(jié)
到此這篇關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的文章就介紹到這了,更多相關(guān)VUE data配置項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關(guān)注視圖層, 它不僅易于上手,還便于與第三方庫或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐
在開發(fā)Web應(yīng)用程序時(shí),常常需要進(jìn)行登錄驗(yàn)證和權(quán)限管理,本文主要介紹了vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作
vue項(xiàng)目打包過后發(fā)現(xiàn)地址錯(cuò)了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請(qǐng)求的地址不對(duì),每次都要去重新打包,太浪費(fèi)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06vue+Element-ui實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)分頁效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11element UI 中的 el-tree 實(shí)現(xiàn) checkbox&n
在日常項(xiàng)目開發(fā)中,會(huì)經(jīng)常遇到,樹形結(jié)構(gòu)的查詢方式,為了快速方便開發(fā),常常會(huì)使用到快捷的ui組件去快速搭樹形結(jié)構(gòu),這里我用的是 element ui 中的 el-tree,對(duì)element UI 中的 el-tree 實(shí)現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧2022-09-09