實(shí)例和組件中 data 的區(qū)別？

實(shí)際上在實(shí)例中的 data 是可以寫成對象的形式也可以寫成函數(shù)的形式。 只有在組件中 data 必須寫成函數(shù)的形式。

<script>
export default {
  data: {}, 
};
</script>

如果我們在組件中將 data 寫成函數(shù)的形式，控制臺就會報(bào)錯。

組件中 data 定義對象和函數(shù)區(qū)別？

當(dāng)我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構(gòu)建成組件實(shí)例，這里我們采用構(gòu)造函數(shù)的形式模擬。

<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用對象的形式
function Component() {}
Component.prototype.data = {
  count: 1,
};

// 創(chuàng)建兩個組件實(shí)例
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)生上面的原因是兩個組件實(shí)例共享同一內(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)建兩個組件實(shí)例
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 都是獨(dú)立的，這樣修改其中一個組件不會影響其他組件中的 data 值。

總結(jié)

• 在根組件中 data 可以是函數(shù)或者對象，不會造成數(shù)據(jù)污染。
• 在組件中 data 必須是函數(shù)的寫法，這樣返回的組件實(shí)例中 data 都是獨(dú)立的對象，不會發(fā)生數(shù)據(jù)污染。

擴(kuò)展

vue 組件data用箭頭函數(shù)行不行？

可以使用箭頭函數(shù)，但是需要注意 this 指向。如果使用箭頭函數(shù)，data 函數(shù)中的 this 不會指向 vue 實(shí)例，如果需要訪問 vue 實(shí)例，可以通過 data 函數(shù)的參數(shù)來實(shí)現(xiàn)。

data: vm => ({ a: vm.myProp })

作者：

實(shí)例和組件中 data 的區(qū)別？

實(shí)際上在實(shí)例中的 data 是可以寫成對象的形式也可以寫成函數(shù)的形式。 只有在組件中 data 必須寫成函數(shù)的形式。

<script>
export default {
  data: {}, 
};
</script>
復(fù)制代碼

如果我們在組件中將 data 寫成函數(shù)的形式，控制臺就會報(bào)錯。

組件中 data 定義對象和函數(shù)區(qū)別？

當(dāng)我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構(gòu)建成組件實(shí)例，這里我們采用構(gòu)造函數(shù)的形式模擬。

<script>
// 模仿構(gòu)造函數(shù)，定義data屬性采用對象的形式
function Component() {}
Component.prototype.data = {
  count: 1,
};

// 創(chuàng)建兩個組件實(shí)例
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)生上面的原因是兩個組件實(shí)例共享同一內(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)建兩個組件實(shí)例
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 都是獨(dú)立的，這樣修改其中一個組件不會影響其他組件中的 data 值。

總結(jié)

• 在根組件中 data 可以是函數(shù)或者對象，不會造成數(shù)據(jù)污染。
• 在組件中 data 必須是函數(shù)的寫法，這樣返回的組件實(shí)例中 data 都是獨(dú)立的對象，不會發(fā)生數(shù)據(jù)污染。

擴(kuò)展

vue 組件data用箭頭函數(shù)行不行？

可以使用箭頭函數(shù)，但是需要注意 this 指向。如果使用箭頭函數(shù)，data 函數(shù)中的 this 不會指向 vue 實(shí)例，如果需要訪問 vue 實(shí)例，可以通過 data 函數(shù)的參數(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)文章希望大家以后多多支持腳本之家！

最新評論