vue裡data為什麼要用return回傳數據

原因：不使用return包裹的資料會在專案的全域可見，會造成變數污染；而使用return包裹後資料中變數只在目前元件中生效，不會影響其他元件。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

官方：
當一個元件被定義，data 必須宣告為傳回初始資料物件的函數，因為元件可能被用來建立多個實例。如果 data
仍然是一個純粹的對象，則所有的實例將共享引用同一個資料對象！透過提供 data 函數，每次建立一個新實例後，我們能夠呼叫 data
函數，從而傳回初始資料的一個全新副本資料物件。

為什麼在專案中data需要使用return回傳資料呢？

• 不使用return包裹的資料會在專案的全域可見，會造成變數污染；使用return包裹後資料中變數只在目前元件中生效，不會影響其他組件。

  當一個元件被定義， data 必須宣告為傳回初始資料物件的函數，因為元件可能被用來建立多個實例。如果 data
  仍然是一個純粹的對象，則所有的實例將共享引用同一個資料對象！透過提供 data 函數，每次建立一個新實例後，我們能夠呼叫 data函數，從而傳回初始資料的一個全新副本資料物件。

類比與引用資料型態。如果不用function return 每個元件的data都是記憶體的同一個位址，那一個資料改變其他也改變了，這當然就不是我們想要的。用function return 其實就相當於申明了新的變量，相互獨立，自然就不會有這樣的問題；js在賦值object物件時，是直接一個相同的記憶體位址。所以為了每個元件的data獨立，採用了這種方式。
如果不是元件的話，正常data的寫法可以直接寫一個對象，例如同一元件中的兩個計算器都共用了data：{ num ： 0}，JS中直接共享物件會造成引用傳遞，也就是說按了加減按鈕後所有num值都會跟著修改，所以這裡用function來每次回傳一個物件實例。

【相關推薦：vue.js教學】

以上是vue裡data為什麼要用return回傳數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！