vue里data要用return返回數(shù)據(jù)的原因是什么

這篇“vue里data要用return返回數(shù)據(jù)的原因是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue里data要用return返回數(shù)據(jù)的原因是什么”文章吧。

原因：不使用return包裹的數(shù)據(jù)會在項目的全局可見，會造成變量污染；而使用return包裹后數(shù)據(jù)中變量只在當前組件中生效，不會影響其他組件。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

官方：
當一個組件被定義， data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因為組件可能被用來創(chuàng)建多個實例。如果 data
仍然是一個純粹的對象，則所有的實例將共享引用同一個數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個新實例后，我們能夠調(diào)用 data
函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。

為什么在項目中data需要使用return返回數(shù)據(jù)呢？

• 不使用return包裹的數(shù)據(jù)會在項目的全局可見，會造成變量污染；使用return包裹后數(shù)據(jù)中變量只在當前組件中生效，不會影響其他組件。

  當一個組件被定義， data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因為組件可能被用來創(chuàng)建多個實例。如果 data
  仍然是一個純粹的對象，則所有的實例將共享引用同一個數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個新實例后，我們能夠調(diào)用 data函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。

類比與引用數(shù)據(jù)類型。如果不用function return 每個組件的data都是內(nèi)存的同一個地址，那一個數(shù)據(jù)改變其他也改變了，這當然就不是我們想要的。用function return 其實就相當于申明了新的變量，相互獨立，自然就不會有這樣的問題；js在賦值object對象時，是直接一個相同的內(nèi)存地址。所以為了每個組件的data獨立，采用了這種方式。
如果不是組件的話，正常data的寫法可以直接寫一個對象，比如同一組件中的兩個計算器都共用了data：{ num ： 0}，JS中直接共享對象會造成引用傳遞，也就是說按了加減按鈕后所有num值都會跟著修改，所以這里用function來每次返回一個對象實例。

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