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

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

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

如果我們?cè)诮M件中將 data 寫(xiě)成函數(shù)的形式，控制臺(tái)就會(huì)報(bào)錯(cuò)。

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

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

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

// 創(chuàng)建兩個(gè)組件實(shí)例
const componentA = new Component();
const componentB = new Component();

// 當(dāng)修改其中一個(gè)組件的中的data值的時(shí)候，另一個(gè)組件的data值會(huì)一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>

分析： 產(chǎn)生上面的原因是兩個(gè)組件實(shí)例共享同一內(nèi)存地址，當(dāng)修改 componentA 的時(shí)候，componentB 會(huì)同步發(fā)生改變。

如果采用函數(shù)的寫(xiě)法？

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

// 創(chuàng)建兩個(gè)組件實(shí)例
const componentA = new Component();
const componentB = new Component();

// 當(dāng)修改其中一個(gè)組件的中的data值的時(shí)候，另一個(gè)組件的data值不會(huì)一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>

分析：這是由于，函數(shù)返回的對(duì)象地址并不相同，這樣每個(gè)組件中 data 都是獨(dú)立的，這樣修改其中一個(gè)組件不會(huì)影響其他組件中的 data 值。

總結(jié)

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

擴(kuò)展

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

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

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

作者：

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

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

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

如果我們?cè)诮M件中將 data 寫(xiě)成函數(shù)的形式，控制臺(tái)就會(huì)報(bào)錯(cuò)。

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

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

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

// 創(chuàng)建兩個(gè)組件實(shí)例
const componentA = new Component();
const componentB = new Component();

// 當(dāng)修改其中一個(gè)組件的中的data值的時(shí)候，另一個(gè)組件的data值會(huì)一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>
復(fù)制代碼

分析： 產(chǎn)生上面的原因是兩個(gè)組件實(shí)例共享同一內(nèi)存地址，當(dāng)修改 componentA 的時(shí)候，componentB 會(huì)同步發(fā)生改變。

如果采用函數(shù)的寫(xiě)法？

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

// 創(chuàng)建兩個(gè)組件實(shí)例
const componentA = new Component();
const componentB = new Component();

// 當(dāng)修改其中一個(gè)組件的中的data值的時(shí)候，另一個(gè)組件的data值不會(huì)一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>
復(fù)制代碼

分析：這是由于，函數(shù)返回的對(duì)象地址并不相同，這樣每個(gè)組件中 data 都是獨(dú)立的，這樣修改其中一個(gè)組件不會(huì)影響其他組件中的 data 值。

總結(jié)

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

擴(kuò)展

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

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

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

到此這篇關(guān)于vue中為什么在組件內(nèi)部data是一個(gè)函數(shù)而不是一個(gè)對(duì)象？的文章就介紹到這了,更多相關(guān)vue中data為什么是函數(shù)而不是對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！