首先方篮，組件是用于代碼的復(fù)用，提高代碼的維護(hù)励负。在不同的頁面藕溅，我們可能使用同一個組件，每個組件中有可能有相同的屬性代碼继榆，我們操作這些屬性來進(jìn)行值的一些更改巾表，例如下面的例子
const obj = {
count:0
}
//注冊并掛載到全局的Vue上
Vue.component('spn',{
template:`#mycpn`,
data(){
return obj
},
methods:{
increment(){
this.count++
},
decrement(){
this.count--
}
}
})
let app = new Vue({
el: "#app",
})
//在設(shè)計這個vue的時候，考慮到組件之間更改屬性的過程中，如果直接更改屬性會造成其他用到組件的地方因為前一個數(shù)據(jù)的變化裹虫，后面組件跟著變化的情況
//干脆直接設(shè)計成為調(diào)用函數(shù)贷岸，每次調(diào)用的時候變量的引用都是不同的，這樣每次在進(jìn)行修改組件屬性的時候惠猿，其他的組件屬性不會發(fā)生更改
上面代碼的效果圖
image.png
上面代碼當(dāng)我點擊加號或者減號會出現(xiàn)什么樣的結(jié)果呢，如下
image.png
當(dāng)我點擊加號的時候负间，這兩個數(shù)字都進(jìn)行了加1操作偶妖，這是我們希望看到的嗎，實際工作中我們也是不希望有這樣的事兒發(fā)生政溃，因為組件是相對封閉的一個空間趾访，他自己里面執(zhí)行的邏輯不能被其他引用了該組件的操作所影響，那么我們就來研究一下為什么會發(fā)生這樣的情況董虱。
首先我們來看一個js代碼
function getMsg(){
return {
name:"cxy",
age:18
}
}
let obj1 = getMsg();
let obj2 = getMsg();
let obj3 = getMsg();
obj1.name="coder"
console.log(obj1.name)
console.log(obj2.name)
console.log(obj3.name)
我調(diào)用了三次getMsg()方法扼鞋，返回了三個對象申鱼，我要驗證這三個對象是否是屬于同一個，我將其中一個對象的屬性改了云头，看其他對象的屬性是否會跟著改變捐友，答案我們可以看到，他們是不會改變的溃槐，如下
image.png
這到底是什么原因呢匣砖？理解這個問題，我們要首先了解內(nèi)存模型昏滴，在進(jìn)行方法調(diào)用返回對象的時候猴鲫，每次返回的對象都是從棧空間里面創(chuàng)建的臨時變量谣殊，也就是一個內(nèi)存地址拂共，如下
Snipaste_2020-06-04_08-41-37.png
來看一下他的反例
//這里直接返回的是臨時開辟的一塊內(nèi)存地址，而且地址不會發(fā)生改變
const msg = {
name:"cxy",
age:18
}
function getMsg(){
return msg;
}
let obj1 = getMsg();
let obj2 = getMsg();
let obj3 = getMsg();
obj1.name="coder"
console.log(obj1.name)
console.log(obj2.name)
console.log(obj3.name)
打印結(jié)果
image.png
這又是為什么呢蟹倾？請看下圖
image.png
那么也就解釋了為什么data是一個函數(shù)匣缘，而不是一個對象，是對象的話鲜棠，就直接返回的同一個內(nèi)存地址肌厨，導(dǎo)致同一組件在不同地方使用，對象屬性之間會產(chǎn)生影響豁陆。歡迎小伙伴兒指出我理解的不是很正確的地方柑爸，喜歡的話可以點贊支持一下，哈哈哈
