作者heavenbetula (绿草)
看板Web_Design
标题[问题] Vue关於data为什麽要用function
时间Sun Jul 9 14:44:54 2023
大家好最近在念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有什麽关系?
--------------------------------------------------
以下为调整过後的范例，对於我自己有比较想通了
希望有助於跟我有一样有相同问题的人帮助理解
--------------------------------------------------
const MyComponent = function() {
this.data = this.data; //Object表示
//this.data = this.data(); //function表示
};
//Object表示
MyComponent.prototype.data ={
a: 1,
b: 2
};
// //function表示
// MyComponent.prototype.data = ()=>{
// return{
// a:1,
// b:2
// }
// }
const component1 = new MyComponent();
const component2 = new MyComponent();
component1.data.b = 5;
console.log(component2.data)
上面的范例调整了不论使用object或是function的方式
统一条件this.data都放在constructor里
且也统一调整了获取的方式都从prototype中拿取
这样就能单纯比较使用object跟使用function的差异
当初卡住的理由是this.data = this.data这行其实就等於原范例中
不写在constructor的原因，理由是写与不写都是从prototype中拿取
当时没想到这点，所以卡了很久
感谢各位大大！
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 115.43.135.34 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1688885096.A.532.html
1F：推 cloki: 你的data不会永远只用{a:1,b:2},要用别的就会把data拆出来 07/09 21:25
不好意思不太明白，请问这有范例可以呈现吗?
2F：→ cloki: 如果只用object的话你直接改就会动让每个实体的data都变成 07/09 21:26
3F：→ cloki: 5,如果用callback的话才会让this.data每次都是新的预设值 07/09 21:26
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/09/2023 23:18:56
4F：→ ck574b027: 你的举例是一样意思，constructor也是function。不要 07/10 08:02
5F：→ ck574b027: 在js使用prototype，语意会让你误会很多东西。 07/10 08:02
6F：→ ssccg: function随时可呼叫，为什麽你会觉得constructor有比较好? 07/10 10:04
7F：→ ssccg: data又不一定要是在new Component的时候呼叫，独立的functi 07/10 10:12
8F：→ ssccg: on之後如果需要取回data预设值，随时都能呼叫data() 07/10 10:13
9F：→ ssccg: 怎麽会没事想去选个最没弹性的写法 07/10 10:14
感觉好像偏离了问题
我的疑问不是说哪个方法好
我也没说constructor比较好
而是想厘清
网路上的解释是说在constructor中使用了this.data = this.data()
但似乎跟vue为什麽data用function的原因无关?
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/11/2023 21:18:18
10F：→ cloki: 因为在设计的概念上就不想直接把data的内容写进去啊 07/12 16:56
11F：→ cloki: 然後那个例子就告诉你不用function的话就会把原型内的值一 07/12 16:58
12F：→ cloki: 并改掉,所以不能用object应该用function,没弄清楚的话先把 07/12 16:59
13F：→ cloki: 例如里面的值都print出来比较一下 07/12 16:59
14F：推 microloft: 没有，原po最後一段用obj的写法就已经不会共用ref了 07/12 18:06
15F：→ microloft: 所以用func并不是必要，只是一种写法选择 07/12 18:07
m大说的对，所以我才会想说为什麽网路上一堆解释都是用这个范例
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/14/2023 21:48:50
16F：→ cloki: 感谢m大 原来我理解是错的 那分别就只是那是没有es6的写法? 07/15 01:50
17F：推 microloft: 如果我没弄错，那写法/机制应该上古时期就有了， 07/15 02:47
18F：→ microloft: ES6只多加入了更直观的class宣告语法。 07/15 02:47
19F：→ microloft: 所以多套一层func除了上面提到的回复预设值外， 07/15 02:48
20F：→ microloft: 老实说我也想不到还有什麽其他好处... 07/15 02:49
21F：→ ck574b027: 不会共用的原因是因为用了function，只是前者叫data() 07/16 10:55
22F：→ ck574b027: 後者是constructor，不要误导人 07/16 10:56
23F：→ ck574b027: 为何要用前者当范例，因为是好习惯 07/16 11:11
24F：→ ck574b027: 与其纠结这个不如去看vue3 07/16 11:12
25F：推 microloft: 并不是，原po共列了3种写法，1会共用，2跟3不会。 07/16 17:26
26F：→ microloft: 根本的差别是1直接操作原型链物件的data的属性， 07/16 17:26
27F：→ microloft: 2跟3则写在建构子里，在初始化时会另生一份。 07/16 17:26
28F：→ microloft: 所以赋值给data时是用func(2)还是物件(3)并不是 07/16 17:26
29F：→ microloft: 是否会共用的原因。 07/16 17:26
30F：→ microloft: 范例2里的data()从来就没有扮演建构子的角色 07/16 17:30
31F：→ microloft: 1~3的建构子都同样是MyComponent 07/16 17:32
32F：→ ck574b027: 这样讲没有触碰到本质，物件(3)不会共用是因为他的位置 07/19 00:18
33F：→ ck574b027: 在建构子。偷用了正确方式来说他是对的根本狐假虎威 07/19 00:20
34F：→ ck574b027: 把范例的建构子拿掉，在new之後才赋值给data比较清楚 07/19 00:22
35F：→ ck574b027: (2) component1.data = init() 07/19 00:24
36F：→ ck574b027: (3) component1.data = {...} 07/19 00:24
37F：→ ck574b027: 说func不是必要，结果利用的建构子还是func，你绍安吗 07/19 00:30
38F：推 microloft: 麻烦你看清楚，原po这篇本来就是在问为什麽都移到建构 07/19 01:55
39F：→ microloft: 子里了还要多用data()这个func，前面有人说是因为共用 07/19 01:56
40F：→ microloft: 问题，我才会回覆说func并不是必要，因为根本的原因不 07/19 01:56
41F：→ microloft: 在那里 07/19 01:56
42F：→ microloft: 另外你提到的「本质」我前面明明就讲过一样的了... 07/19 02:09
43F：→ ssccg: 我觉得是原PO死读书，虽然教学说data用function是避免重复 07/21 10:18
44F：→ ssccg: 用到同一个物件，但那就不是唯一的原因啊，本来就有很多方 07/21 10:20
45F：→ ssccg: 法达成这个效果，我相信写讲解的人也只是要表示「有这个效 07/21 10:21
46F：→ ssccg: 果是设计目标之一」而不是「只有这个设计能达这效果」 07/21 10:22
47F：→ ssccg: 甚至就放prototype但新建Component时固定做deep clone也行 07/21 10:25
48F：→ ssccg: 啊，不用独立function也不用constructor啊 07/21 10:27
49F：→ ssccg: 用function只是充分条件，但原PO似乎坚持一定要充要条件(只 07/21 10:28
50F：→ ssccg: 有用function才能达成这效果)才叫做「有关」，只要有其他实 07/21 10:29
51F：→ ssccg: 作就叫无关，莫名奇妙死脑筋 07/21 10:29
我知道有许多方法啊
但我就是其中一点不明白才会只针对这一点询问
假如我是一个程式小白，我对for回圈不明白
难道你跟我讲解多个回圈方式
会对我针对for回圈不明白这件事有帮助吗
所以我才会说这偏离的问题
52F：→ ssccg: 现实就是很多方法，再用别的条件来挑哪个方法好(或比较不坏 07/21 10:30
53F：→ ssccg: )但原PO埾持这叫做偏离问题，那就自己去想再久也想不通吧 07/21 10:30
54F：→ ssccg: 为什麽网路上一堆解释都是用这个范例，讲白一点就是觉得对 07/21 10:30
55F：→ ssccg: 新手不用讲这麽多啦，啊对老手自然会自己想通才不会这样卡 07/21 10:31
56F：→ ssccg: 住脑子转不动 07/21 10:31
57F：→ ssccg: 要讲其他考量那可多了，constructor最不好的就是呼叫时机很 07/21 10:36
58F：→ ssccg: 死一定在最前面啊，如果想把Component建立和data初始化中间 07/21 10:37
59F：→ ssccg: 切个阶段出来就不行了。另外像用function而不用clone的理由 07/21 10:39
60F：→ ssccg: 显然是function内容是呼叫时执行，而不像物件早就填进去了 07/21 10:46
首先我想澄清一下,如果我只是死读书，我大可背下这个解法就好
我又何必去追问这个的原因是为什麽
这边每个大大来回答解惑我都很感激
但不表示我不能表达我觉得有疑问的地方
其实这一版看多了许多发问的问题
往往都会被洗脸甚至被认为这种问题没什麽好问
只希望大家都可以将心比心
想想每个人都有新手的时候
谢谢
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/22/2023 13:00:11
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/22/2023 14:18:25
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/22/2023 14:22:02
※ 编辑: heavenbetula (115.43.135.34 台湾), 07/22/2023 14:28:45