Vue組件中的data必須是一個(gè)function的原因淺析
組件可以有自己的data，并且data必須是一個(gè)function。
在下面這個(gè)例子中，data 返回了一個(gè)在外部定義的對(duì)象。并且這個(gè)組件在頁(yè)面中使用了3次，點(diǎn)擊+1時(shí)出現(xiàn)了如下情況：data中的count屬性影響到了所有實(shí)例。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" >
<style type="text/css">
#app{
margin:20px;
}
</style>
</head>
<body>
<div id='app'>
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<template id="tmp1">
<div>
<input type="button" value="+1" @click="increment">
<h1>{{count}}</h1>
</div>
</template>
</body>
<script src="../lib/vue.js"></script>
<script>
var dataObj = {count:0}
//這是一個(gè)計(jì)數(shù)器組件,每當(dāng)點(diǎn)擊按鈕,讓data中的count值加1
Vue.component('counter',{
template:'#tmp1',
data:function(){
return dataObj
},
methods:{
increment(){
this.count++
}
}
})
var vm = new Vue({
el:'#app',
})
</script>
</html>
而當(dāng)data選項(xiàng)是一個(gè)函數(shù)的時(shí)候，每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，這樣各個(gè)實(shí)例中的data不會(huì)相互影響，是獨(dú)立的。
Vue.component('counter',{
template:'#tmp1',
data:function(){
return {count:0}
},
methods:{
increment(){
this.count++
}
}
})
補(bǔ)充：下面看下vue組件中data必須是一個(gè)函數(shù)的原因
vue組件中data值不能為對(duì)象，因?yàn)閷?duì)象是引用類(lèi)型，組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用。如果data值為對(duì)象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對(duì)象，其中一個(gè)組件改變data屬性值，其它實(shí)例也會(huì)受到影響。
上面解釋了data不能為對(duì)象的原因，這里我們簡(jiǎn)單說(shuō)下data為函數(shù)的原因。data為函數(shù)，通過(guò)return 返回對(duì)象的拷貝，致使每個(gè)實(shí)例都有自己獨(dú)立的對(duì)象，實(shí)例之間可以互不影響的改變data屬性值。
data為函數(shù)的示例：
data:function(){
return {
k1: 'v1',
k2: 'v2',
...
}
}
總結(jié)
以上所述是小編給大家介紹的Vue組件中的data必須是一個(gè)function的原因淺析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
通過(guò)本文帶領(lǐng)大家去學(xué)習(xí)vue3.0 CLI - 2.5 - 了解組件的三維的相關(guān)知識(shí)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-09-09
一篇文章帶你吃透Vue生命周期(結(jié)合案例通俗易懂)
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透Vue生命周期，文章通過(guò)結(jié)合案例更加的通俗易懂,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
甘特圖是一種條狀圖,直觀展示項(xiàng)目進(jìn)展隨時(shí)間的走勢(shì)及聯(lián)系,其中,項(xiàng)目時(shí)間由橫軸表示,項(xiàng)目活動(dòng)由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實(shí)現(xiàn)方法,并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。下面我們通過(guò)本文給大家介紹vue axios用法教程詳解，感興趣的朋友一起看看吧2017-07-07
VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟
這篇文章主要介紹了vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
本篇文章主要介紹了詳解vuejs幾種不同組件（頁(yè)面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06