vue中為什麼在組件內部data是一個函數而不是一個對象

Posted on by

實例和組件中 data 的區別？

實際上在實例中的 data 是可以寫成對象的形式也可以寫成函數的形式。 隻有在組件中 data 必須寫成函數的形式。

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

如果我們在組件中將 data 寫成函數的形式，控制臺就會報錯。

組件中 data 定義對象和函數區別？

當我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構建成組件實例，這裡我們采用構造函數的形式模擬。

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

// 創建兩個組件實例
const componentA = new Component();
const componentB = new Component();

// 當修改其中一個組件的中的data值的時候，另一個組件的data值會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>

分析： 產生上面的原因是兩個組件實例共享同一內存地址，當修改 componentA 的時候，componentB 會同步發生改變。

如果采用函數的寫法？

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

// 創建兩個組件實例
const componentA = new Component();
const componentB = new Component();

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

分析：這是由於，函數返回的對象地址並不相同，這樣每個組件中 data 都是獨立的，這樣修改其中一個組件不會影響其他組件中的 data 值。

總結

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

擴展

vue 組件data用箭頭函數行不行？

可以使用箭頭函數，但是需要註意 this 指向。如果使用箭頭函數，data 函數中的 this 不會指向 vue 實例，如果需要訪問 vue 實例，可以通過 data 函數的參數來實現。

data: vm =&gt; ({ a: vm.myProp })

作者：

實例和組件中 data 的區別？

實際上在實例中的 data 是可以寫成對象的形式也可以寫成函數的形式。 隻有在組件中 data 必須寫成函數的形式。

&lt;script&gt;
export default {
  data: {}, 
};
&lt;/script&gt;
復制代碼

如果我們在組件中將 data 寫成函數的形式，控制臺就會報錯。

image.png

組件中 data 定義對象和函數區別？

當我們定義好一個組件的時候，vue 最終都會通過 vue.extend() 構建成組件實例，這裡我們采用構造函數的形式模擬。

&lt;script&gt;
// 模仿構造函數，定義data屬性采用對象的形式
function Component() {}
Component.prototype.data = {
  count: 1,
};

// 創建兩個組件實例
const componentA = new Component();
const componentB = new Component();

// 當修改其中一個組件的中的data值的時候，另一個組件的data值會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 2
&lt;/script&gt;
復制代碼

分析： 產生上面的原因是兩個組件實例共享同一內存地址，當修改 componentA 的時候，componentB 會同步發生改變。

如果采用函數的寫法？

&lt;script&gt;
// 模仿構造函數，定義data屬性采用函數的形式
function Component() {
  this.data = this.data();
}
Component.prototype.data = function () {
  return {
    count: 1,
  };
};

// 創建兩個組件實例
const componentA = new Component();
const componentB = new Component();

// 當修改其中一個組件的中的data值的時候，另一個組件的data值不會一起改變
componentA.data.count = 2;
console.log(componentB.data.count); // 1
&lt;/script&gt;
復制代碼

分析：這是由於，函數返回的對象地址並不相同，這樣每個組件中 data 都是獨立的，這樣修改其中一個組件不會影響其他組件中的 data 值。

總結

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

擴展

vue 組件data用箭頭函數行不行？

可以使用箭頭函數，但是需要註意 this 指向。如果使用箭頭函數，data 函數中的 this 不會指向 vue 實例，如果需要訪問 vue 實例，可以通過 data 函數的參數來實現。

data: vm =&gt; ({ a: vm.myProp })

到此這篇關於vue中為什麼在組件內部data是一個函數而不是一個對象？的文章就介紹到這瞭,更多相關vue中data為什麼是函數而不是對象內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：