在main.js里使用Vue.prototype聲明的變量虽界,實際上是為Vue對象添加了一個原型屬性谎懦,而不是一個全局變量哀托。
但是如果這個原型屬性的值是引用類型的锹安,我們就可以借此實現(xiàn)全局變量
當你在main.js里聲明了Vue.prototype.a = 1后,因為你的每一個vue組件都是一個Vue對象的實例并闲,
所以即使你沒有在組件內部使用
data(){
return{……}
}
聲明a,你依然可以在組件中通過this.a來訪問谷羞。
當然帝火,你也可以在組件中添加一個變量a,
這時你訪問的就是你在組件中添加的a湃缎,而不再是之前在原型中添加的a了犀填,
當然你對組件的a繼續(xù)修改即不會影響原型中的a和其他組建中的a,
就類似于下面這段代碼(Form是一個自定義對象類型嗓违,Vue也可以看作一個自定義對象類型九巡,而每個.vue文件就是一個對象的實例)
//基本類型
function Form(){
}
Form.prototype.a= 0
var f1 = new Form()
var f2 = new Form()
console.log(f1) //Form {}
console.log(f1.a) //0
console.log(f2) //Form {}
console.log(f2.a) //0
f1.a++
console.log('f1.a++之后') //f1.a++即 f1.a = f1.a + 1,在f1中添加了a屬性蹂季,其值為原型中a的值+1
console.log(f1) //Form {a: 1}
console.log(f1.a) //1
console.log(f2) //Form {}
console.log(f2.a) //0
//引用類型
function Form(){
}
Form.prototype.a= {value:0}
var f1 = new Form()
var f2 = new Form()
console.log(f1) //Form {}
console.log(f1.a.value) //0
console.log(f2) //Form {}
console.log(f2.a.value) //0
f1.a.value++
console.log('f1.a++之后') //f1.a++之后
console.log(f1) //Form {}
console.log(f1.a.value) //1
console.log(f2) //Form {}
console.log(f2.a.value) //1
原型中a的值是一個Object類數(shù)據(jù)冕广,在實例中使用f1.a.value++并沒有修改f1.a指向的指針疏日,
實例中依然是訪問的原型中的a,同時改變的也是原型中a.value的值撒汉。
而f2.a.value訪問的也是原型中a.value的值沟优,因此f2.a.value的值變化了。
如果我們在main.js中聲明Vue.prototype.global={a:0}
那我們只要不在組件中重新添加global這個變量睬辐,就能在所有組件中使用this.global.a這個值了
同時在一個組件中修改了this.global.a的值挠阁,其他所有組件中訪問的this.global.a的值也會變化
這樣就相當于使用Vue.prototype實現(xiàn)了vue的全局變量