溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Vue組件中的data必須是一個function的原因是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
組件可以有自己的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">
<h2>{{count}}</h2>
</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值為對象，將導致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。
上面解釋了data不能為對象的原因，這里我們簡單說下data為函數(shù)的原因。data為函數(shù)，通過return 返回對象的拷貝，致使每個實例都有自己獨立的對象，實例之間可以互不影響的改變data屬性值。
data為函數(shù)的示例：
data:function(){
return {
k1: 'v1',
k2: 'v2',
...
}
}感謝各位的閱讀！關(guān)于“Vue組件中的data必須是一個function的原因是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼