[問題] Vue關於data為什麼要用function

看板Web_Design作者 (綠草)時間7月前 (2023/07/09 14:44), 7月前編輯推噓5(5037)
留言42則, 4人參與, 7月前最新討論串1/1
大家好最近在唸vue 相信關於為什麼data要使用function已經被討論到爛掉 看了很多講解都是下面的例子 const MyComponent = function() {}; MyComponent.prototype.data ={ a: 1, b: 2, }; const component1 = new MyComponent(); const component2 = new MyComponent(); component1.data.b = 5; console.log(component2.data) ↑因為會共享同一個reference ----------------------------------- 所以應該改成以下function的方式: const MyComponent = function() { this.data = this.data(); }; MyComponent.prototype.data = ()=> { return{ a: 1, b: 2 } }; const component1 = new MyComponent(); const component2 = new MyComponent(); component1.data.b = 5; console.log(component2.data) 但我不太明白的是這個講解,跟是不是function的影響有什麼關係? 因為這邊如果一開始就將data的資料放在constructor裡 像是 const MyComponent = function() { this.data = { a:1, b:2 } }; 每次實例化時就會初始化,所以只要把data放在constructor裡 本來就可以解決問題了,跟是不是function有什麼關係? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 115.43.135.34 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1688885096.A.532.html

07/09 21:25, 7月前 , 1F
你的data不會永遠只用{a:1,b:2},要用別的就會把data拆出來
07/09 21:25, 1F
不好意思不太明白,請問這有範例可以呈現嗎?

07/09 21:26, 7月前 , 2F
如果只用object的話你直接改就會動讓每個實體的data都變成
07/09 21:26, 2F

07/09 21:26, 7月前 , 3F
5,如果用callback的話才會讓this.data每次都是新的預設值
07/09 21:26, 3F
※ 編輯: heavenbetula (115.43.135.34 臺灣), 07/09/2023 23:18:56

07/10 08:02, 7月前 , 4F
你的舉例是一樣意思,constructor也是function。不要
07/10 08:02, 4F

07/10 08:02, 7月前 , 5F
在js使用prototype,語意會讓你誤會很多東西。
07/10 08:02, 5F

07/10 10:04, 7月前 , 6F
function隨時可呼叫,為什麼你會覺得constructor有比較好?
07/10 10:04, 6F

07/10 10:12, 7月前 , 7F
data又不一定要是在new Component的時候呼叫,獨立的functi
07/10 10:12, 7F

07/10 10:13, 7月前 , 8F
on之後如果需要取回data預設值,隨時都能呼叫data()
07/10 10:13, 8F

07/10 10:14, 7月前 , 9F
怎麼會沒事想去選個最沒彈性的寫法
07/10 10:14, 9F
感覺好像偏離了問題 我的疑問不是說哪個方法好 我也沒說constructor比較好 而是想釐清 網路上的解釋是說在constructor中使用了this.data = this.data() 但似乎跟vue為什麼data用function的原因無關? ※ 編輯: heavenbetula (115.43.135.34 臺灣), 07/11/2023 21:18:18

07/12 16:56, 7月前 , 10F
因為在設計的概念上就不想直接把data的內容寫進去啊
07/12 16:56, 10F

07/12 16:58, 7月前 , 11F
然後那個例子就告訴你不用function的話就會把原型內的值一
07/12 16:58, 11F

07/12 16:59, 7月前 , 12F
併改掉,所以不能用object應該用function,沒弄清楚的話先把
07/12 16:59, 12F

07/12 16:59, 7月前 , 13F
例如裡面的值都print出來比較一下
07/12 16:59, 13F

07/12 18:06, 7月前 , 14F
沒有,原po最後一段用obj的寫法就已經不會共用ref了
07/12 18:06, 14F

07/12 18:07, 7月前 , 15F
所以用func並不是必要,只是一種寫法選擇
07/12 18:07, 15F
m大說的對,所以我才會想說為什麼網路上一堆解釋都是用這個範例 ※ 編輯: heavenbetula (115.43.135.34 臺灣), 07/14/2023 21:48:50

07/15 01:50, 7月前 , 16F
感謝m大 原來我理解是錯的 那分別就只是那是沒有es6的寫法?
07/15 01:50, 16F

07/15 02:47, 7月前 , 17F
如果我沒弄錯,那寫法/機制應該上古時期就有了,
07/15 02:47, 17F

07/15 02:47, 7月前 , 18F
ES6只多加入了更直觀的class宣告語法。
07/15 02:47, 18F

07/15 02:48, 7月前 , 19F
所以多套一層func除了上面提到的回復預設值外,
07/15 02:48, 19F

07/15 02:49, 7月前 , 20F
老實說我也想不到還有什麼其他好處...
07/15 02:49, 20F

07/16 10:55, 7月前 , 21F
不會共用的原因是因為用了function,只是前者叫data()
07/16 10:55, 21F

07/16 10:56, 7月前 , 22F
後者是constructor,不要誤導人
07/16 10:56, 22F

07/16 11:11, 7月前 , 23F
為何要用前者當範例,因為是好習慣
07/16 11:11, 23F

07/16 11:12, 7月前 , 24F
與其糾結這個不如去看vue3
07/16 11:12, 24F

07/16 17:26, 7月前 , 25F
並不是,原po共列了3種寫法,1會共用,2跟3不會。
07/16 17:26, 25F

07/16 17:26, 7月前 , 26F
根本的差別是1直接操作原型鍊物件的data的屬性,
07/16 17:26, 26F

07/16 17:26, 7月前 , 27F
2跟3則寫在建構子裡,在初始化時會另生一份。
07/16 17:26, 27F

07/16 17:26, 7月前 , 28F
所以賦值給data時是用func(2)還是物件(3)並不是
07/16 17:26, 28F

07/16 17:26, 7月前 , 29F
是否會共用的原因。
07/16 17:26, 29F

07/16 17:30, 7月前 , 30F
範例2裡的data()從來就沒有扮演建構子的角色
07/16 17:30, 30F

07/16 17:32, 7月前 , 31F
1~3的建構子都同樣是MyComponent
07/16 17:32, 31F

07/19 00:18, 7月前 , 32F
這樣講沒有觸碰到本質,物件(3)不會共用是因為他的位置
07/19 00:18, 32F

07/19 00:20, 7月前 , 33F
在建構子。偷用了正確方式來說他是對的根本狐假虎威
07/19 00:20, 33F

07/19 00:22, 7月前 , 34F
把範例的建構子拿掉,在new之後才賦值給data比較清楚
07/19 00:22, 34F

07/19 00:24, 7月前 , 35F
(2) component1.data = init()
07/19 00:24, 35F

07/19 00:24, 7月前 , 36F
(3) component1.data = {...}
07/19 00:24, 36F

07/19 00:30, 7月前 , 37F
說func不是必要,結果利用的建構子還是func,你紹安嗎
07/19 00:30, 37F

07/19 01:55, 7月前 , 38F
麻煩你看清楚,原po這篇本來就是在問為什麼都移到建構
07/19 01:55, 38F

07/19 01:56, 7月前 , 39F
子裡了還要多用data()這個func,前面有人說是因為共用
07/19 01:56, 39F

07/19 01:56, 7月前 , 40F
問題,我才會回覆說func並不是必要,因為根本的原因不
07/19 01:56, 40F

07/19 01:56, 7月前 , 41F
在那裡
07/19 01:56, 41F

07/19 02:09, 7月前 , 42F
另外你提到的「本質」我前面明明就講過一樣的了...
07/19 02:09, 42F
文章代碼(AID): #1agbTeKo (Web_Design)
文章代碼(AID): #1agbTeKo (Web_Design)