vue中為什么在組件內(nèi)部data是一個函數(shù)而不是一個對象
實例和組件中 data 的區(qū)別？
實際上在實例中的 data 是可以寫成對象的形式也可以寫成函數(shù)的形式。 只有在組件中 data 必須寫成函數(shù)的形式。
<script>
export default {
data: {},
};
</script>如果我們在組件中將 data 寫成函數(shù)的形式，控制臺就會報錯。
組件中 data 定義對象和函數(shù)區(qū)別？
當(dāng)我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構(gòu)建成組件實例，這里我們采用構(gòu)造函數(shù)的形式模擬。
<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用對象的形式
function Component() {}
Component.prototype.data = {
count: 1,
};
// 創(chuàng)建兩個組件實例
const componentA = new Component();
const componentB = new Component();
// 當(dāng)修改其中一個組件的中的data值的時候，另一個組件的data值會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>分析： 產(chǎn)生上面的原因是兩個組件實例共享同一內(nèi)存地址，當(dāng)修改 componentA 的時候，componentB 會同步發(fā)生改變。
如果采用函數(shù)的寫法？
<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用函數(shù)的形式
function Component() {
this.data = this.data();
}
Component.prototype.data = function () {
return {
count: 1,
};
};
// 創(chuàng)建兩個組件實例
const componentA = new Component();
const componentB = new Component();
// 當(dāng)修改其中一個組件的中的data值的時候，另一個組件的data值不會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>分析：這是由于，函數(shù)返回的對象地址并不相同，這樣每個組件中 data 都是獨立的，這樣修改其中一個組件不會影響其他組件中的 data 值。
總結(jié)
- 在根組件中 data 可以是函數(shù)或者對象，不會造成數(shù)據(jù)污染。
- 在組件中 data 必須是函數(shù)的寫法，這樣返回的組件實例中 data 都是獨立的對象，不會發(fā)生數(shù)據(jù)污染。
擴展
vue 組件data用箭頭函數(shù)行不行？
可以使用箭頭函數(shù)，但是需要注意 this 指向。如果使用箭頭函數(shù)，data 函數(shù)中的 this 不會指向 vue 實例，如果需要訪問 vue 實例，可以通過 data 函數(shù)的參數(shù)來實現(xiàn)。
data: vm => ({ a: vm.myProp })作者：
實例和組件中 data 的區(qū)別？
實際上在實例中的 data 是可以寫成對象的形式也可以寫成函數(shù)的形式。 只有在組件中 data 必須寫成函數(shù)的形式。
<script>
export default {
data: {},
};
</script>
復(fù)制代碼如果我們在組件中將 data 寫成函數(shù)的形式，控制臺就會報錯。
組件中 data 定義對象和函數(shù)區(qū)別？
當(dāng)我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構(gòu)建成組件實例，這里我們采用構(gòu)造函數(shù)的形式模擬。
<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用對象的形式
function Component() {}
Component.prototype.data = {
count: 1,
};
// 創(chuàng)建兩個組件實例
const componentA = new Component();
const componentB = new Component();
// 當(dāng)修改其中一個組件的中的data值的時候，另一個組件的data值會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>
復(fù)制代碼分析： 產(chǎn)生上面的原因是兩個組件實例共享同一內(nèi)存地址，當(dāng)修改 componentA 的時候，componentB 會同步發(fā)生改變。
如果采用函數(shù)的寫法？
<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用函數(shù)的形式
function Component() {
this.data = this.data();
}
Component.prototype.data = function () {
return {
count: 1,
};
};
// 創(chuàng)建兩個組件實例
const componentA = new Component();
const componentB = new Component();
// 當(dāng)修改其中一個組件的中的data值的時候，另一個組件的data值不會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>
復(fù)制代碼分析：這是由于，函數(shù)返回的對象地址并不相同，這樣每個組件中 data 都是獨立的，這樣修改其中一個組件不會影響其他組件中的 data 值。
總結(jié)
- 在根組件中 data 可以是函數(shù)或者對象，不會造成數(shù)據(jù)污染。
- 在組件中 data 必須是函數(shù)的寫法，這樣返回的組件實例中 data 都是獨立的對象，不會發(fā)生數(shù)據(jù)污染。
擴展
vue 組件data用箭頭函數(shù)行不行？
可以使用箭頭函數(shù)，但是需要注意 this 指向。如果使用箭頭函數(shù)，data 函數(shù)中的 this 不會指向 vue 實例，如果需要訪問 vue 實例，可以通過 data 函數(shù)的參數(shù)來實現(xiàn)。
data: vm => ({ a: vm.myProp })到此這篇關(guān)于vue中為什么在組件內(nèi)部data是一個函數(shù)而不是一個對象？的文章就介紹到這了,更多相關(guān)vue中data為什么是函數(shù)而不是對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3接口數(shù)據(jù)賦值對象,渲染報錯問題及解決
這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對象,渲染報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了el-table?表格分頁序號問題小結(jié),本文通過實例代碼圖文效果展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中的函數(shù)同步執(zhí)行導(dǎo)致的數(shù)據(jù)獲取失敗問題處理辦法
Vue中的mount中有兩個函數(shù),第一個函數(shù)執(zhí)行完后給data中的userInfo賦值,但是第二個函數(shù)獲取userInfo時是空值,這種情況可能是因為第二個函數(shù)在獲取 userInfo 時發(fā)生在第一個函數(shù)執(zhí)行完之前,所以本文給大家介紹了Vue中的函數(shù)同步執(zhí)行導(dǎo)致的數(shù)據(jù)獲取失敗問題處理辦法2024-08-08
這篇文章主要介紹了Vue.js實現(xiàn)拖放效果的實例的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實例方法
在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06