vue在組件內(nèi)部data是一個函數(shù)而不是一個對象的原因是什么

這篇“vue在組件內(nèi)部data是一個函數(shù)而不是一個對象的原因是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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>

如果我們在組件中將 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 })

以上就是關(guān)于“vue在組件內(nèi)部data是一個函數(shù)而不是一個對象的原因是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。