詳解Vue的組件中data選項(xiàng)為什么必須是函數(shù)

更新時(shí)間：2020年08月17日 16:05:16 作者：letMeAlone_

這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項(xiàng)為什么必須是函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

官方解釋

data 必須是函數(shù)

構(gòu)造 Vue 實(shí)例時(shí)傳入的各種選項(xiàng)大多數(shù)都可以在組件里使用。只有一個(gè)例外：data 必須是函數(shù)。實(shí)際上，如果你這么做：

Vue.component('my-component', {
 template: '<span>{{ message }}</span>',
 data: {
 message: 'hello'
 }
})

那么 Vue 會(huì)停止運(yùn)行，并在控制臺(tái)發(fā)出警告，告訴你在組件實(shí)例中 data 必須是一個(gè)函數(shù)。但理解這種規(guī)則為何存在也是很有益處的，所以讓我們先作個(gè)弊：

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 ```
 // 技術(shù)上 data 的確是一個(gè)函數(shù)了，因此 Vue 不會(huì)警告，
 // 但是我們卻給每個(gè)組件實(shí)例返回了同一個(gè)對(duì)象的引用
 ```
 data: function () {
 return data
 }
})
new Vue({
 el: '#example-2'
})

=============以下為個(gè)人理解，如果有誤，請(qǐng)指出，謝謝指教

Vue.component('xxx',{
template:'{{counter}}',
data:function(){
return counter=0;
}
})

Vue在注冊(cè)到全局/局部并生成實(shí)例時(shí)，它是具有自己的作用域的，也就是說(shuō)

在template 字符串模板中如果存在一個(gè)變量名與VUE實(shí)例的變量名一致的時(shí)候，這個(gè)變量只會(huì)是組件中的變量，而不會(huì)是VUE的全局變量

比如

//以下代碼中，組件中的count和Vue中的count是一樣的變量名，但是在組件中只會(huì)顯示0而不是2
Vue.component('simple-counter',{
    template:'<button>{{count}}</button>',
    data:function(){
     return count=0;

    }

   });
   vm=new Vue({
    el:'#example-2',
    data:{
     count:2

    }

   })

以上代碼從原型鏈上理解

var component=function(){}//為了讓組件有自己的作用域，它必須包含私有變量data，所以簡(jiǎn)單化的理解應(yīng)該是這樣的

var component=function(){
this.data=this.data();//存在私有的data屬性
}

component.propotype.data=function(){
return {count:0}
}
//當(dāng)我們?cè)趖emplate中使用數(shù)據(jù)的時(shí)候，我們是調(diào)用的component的私有變量data
//如果我們不以函數(shù)的形式處理又會(huì)如何呢？
var component=function(){
//不存在私有的data屬性
}
component.propotype.data= {count:0}
//此時(shí)，data不作為私有變量，就會(huì)有暴露的風(fēng)險(xiǎn)，而且，它指向的是{count:0}的引用，所以當(dāng)重復(fù)創(chuàng)建組件的時(shí)候，component的data都指向了同一個(gè)引用。因此會(huì)相互影響。

如果不以原型鏈的形式處理，也可以不傳入函數(shù)

function component(d) {

    this.data = d;
   }
var com = new component({
    count: 1
   });
   var com1 = new component({
    count: 1
   });

總結(jié)

到此這篇關(guān)于詳解Vue的組件中data選項(xiàng)為什么必須是函數(shù)的文章就介紹到這了,更多相關(guān)Vue組件中data選項(xiàng)是函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: