Skip to content
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

[vue] 为什么data属性必须声明为返回一个初始数据对应的函数呢? #267

Open
haizhilin2013 opened this issue Jun 16, 2019 · 11 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 为什么data属性必须声明为返回一个初始数据对应的函数呢?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

公司的面试题中也有这么一题
如果是公共组件确实必须要返回一个函数,
但是如果不是可以直接一个对象

因为没有执行函数return之后返回的都是一个全新的对象(类似于工厂模式的设计思想),
虽然我们一样, 但是我们又没有关系. 避免数据混淆

@chenjinWeb
Copy link

对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

@Ricemonster
Copy link

Ricemonster commented Jul 26, 2019

防止组件复用数据,data必须为一个函数,因为实例可以维护一份被返回对象的独立的拷贝


data(){
  return {
     content: 0
   }
}

@Ricemonster
Copy link

对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

说的好

@DoubleBlock
Copy link

对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

学习了

@coymaple
Copy link

往简单了说,是为了阻止相同vue组件之间共享data。往复杂了说,js引擎在编译代码的时候,会尝试为所有import引入的模块分配地址,相同的模块只会分配一次地址,执行时按照引用取值,同样的引用拿到的对象是一样的,其内部的data属性也是一样的。dat改成函数以后,每次 return 都会重新分配内存创建新对象,就不存在同样的引用这个问题。

@lly-ak47
Copy link

lly-ak47 commented Nov 11, 2020

确保每个组件独享一个数据对象,而不是共享一个数据对象

@crush2020
Copy link

@chenjinWeb

对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

大佬厉害,这回答我瞬间清晰了

@xiqi99520
Copy link

因为以函数形式定义,每次引用都会是全新data对象,有效规避多实例之间状态污染问题。

@yxllovewq
Copy link

yxllovewq commented Mar 9, 2022

对象直接赋值,得到的是数据存储的地址,修改会触发连锁反应

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);

@Cai-zhiji
Copy link

在Vue中,将data属性声明为返回一个初始数据对应的函数是为了确保每个组件实例都拥有独立的数据副本。

当一个组件被定义时,它可能会被多次实例化,例如在多个地方重复使用。如果直接将data属性声明为一个对象,那么所有该组件的实例将共享相同的数据引用。这意味着,当一个实例修改数据时,其他实例也会受到影响,导致数据的不可预测性和混乱。

通过将data属性声明为一个返回初始数据的函数,每个组件实例都会调用该函数来获取独立的数据副本。这样每个实例都有自己的数据,它们之间互不干扰,保证了数据的独立性和可预测性。

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests