-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
[vue] 为什么data属性必须声明为返回一个初始数据对应的函数呢? #267
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
公司的面试题中也有这么一题 因为没有执行函数return之后返回的都是一个全新的对象(类似于工厂模式的设计思想), |
对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。 |
防止组件复用数据,data必须为一个函数,因为实例可以维护一份被返回对象的独立的拷贝
|
说的好 |
学习了 |
往简单了说,是为了阻止相同vue组件之间共享data。往复杂了说,js引擎在编译代码的时候,会尝试为所有import引入的模块分配地址,相同的模块只会分配一次地址,执行时按照引用取值,同样的引用拿到的对象是一样的,其内部的data属性也是一样的。dat改成函数以后,每次 return 都会重新分配内存创建新对象,就不存在同样的引用这个问题。 |
确保每个组件独享一个数据对象,而不是共享一个数据对象 |
大佬厉害,这回答我瞬间清晰了 |
因为以函数形式定义,每次引用都会是全新data对象,有效规避多实例之间状态污染问题。 |
对象直接赋值,得到的是数据存储的地址,修改会触发连锁反应 let obj = { a: 1 };
let obj2 = obj;
obj.a = 2;
console.log(obj2.a); 通过工厂函数,会返回新的对象 const createObj = () => ({ a: 1 });
let obj = createObj();
let obj2 = createObj();
obj.a = 2;
console.log(obj2.a); |
在Vue中,将data属性声明为返回一个初始数据对应的函数是为了确保每个组件实例都拥有独立的数据副本。 当一个组件被定义时,它可能会被多次实例化,例如在多个地方重复使用。如果直接将data属性声明为一个对象,那么所有该组件的实例将共享相同的数据引用。这意味着,当一个实例修改数据时,其他实例也会受到影响,导致数据的不可预测性和混乱。 通过将data属性声明为一个返回初始数据的函数,每个组件实例都会调用该函数来获取独立的数据副本。这样每个实例都有自己的数据,它们之间互不干扰,保证了数据的独立性和可预测性。
|
[vue] 为什么data属性必须声明为返回一个初始数据对应的函数呢?
The text was updated successfully, but these errors were encountered: