Object是引用數據類型,如果不用function返回,每個組件的data都是內存的同一個地址,一個數據改變了其他也改變了;
JavaScript只有函數構成作用域(注意理解作用域,只有函數 {} 構成作用域,對象的 {} 以及 if(){}都不構成作用域) ,data是一個函數時,每個組件實例都有自己的作用域,每個實例相互獨立,不會相互影響。
組件是可復用的vue
實例,一個組件被創建好之后,就可能被用在各個地方,而組件不管被復用了多少次,組件中的data
數據都應該是相互隔離,互不影響的,基於這一理念,組件每復用一次,data
數據就應該被復制一次,之后,當某一處復用的地方組件內data
數據被改變時,其他復用地方組件的data
數據不受影響
因為同一個組件可能被復用引入多次,如果是一個對象的話,對象是一個堆內存空間地址,如一個組件被復用了三次,那么當其中一個組件中的data被修改了,另外兩個也會跟着發生變化。因為他們指向同一塊內存空間。
解決辦法就是變成一個函數呀,因為函數執行形成一個私有作用域,也就是可以開辟一塊獨立的內存空間,有自己的Prototype原型。就互不影響了。
組件中的data
寫成一個函數,數據以函數返回值形式定義,這樣每復用一次組件,就會返回一份新的data
,類似於給每個組件實例創建一個私有的數據空間,讓各個組件實例維護各自的數據。而單純的寫成對象形式,就使得所有組件實例共用了一份data
,就會造成一個變了全都會變的結果。