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