Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

wenyejie

wenyejie commented on Jun 17, 2019

@wenyejie

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

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

chenjinWeb

chenjinWeb commented on Jul 25, 2019

@chenjinWeb

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

Ricemonster

Ricemonster commented on Jul 26, 2019

@Ricemonster

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


data(){
  return {
     content: 0
   }
}
Ricemonster

Ricemonster commented on Jul 26, 2019

@Ricemonster

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

说的好

DoubleBlock

DoubleBlock commented on Sep 27, 2019

@DoubleBlock

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

学习了

coymaple

coymaple commented on Sep 16, 2020

@coymaple

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

lly-ak47

lly-ak47 commented on Nov 11, 2020

@lly-ak47

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

crush2020

crush2020 commented on Feb 2, 2021

@crush2020

@chenjinWeb

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

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

xiqi99520

xiqi99520 commented on Feb 9, 2021

@xiqi99520

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

yxllovewq

yxllovewq commented on Mar 9, 2022

@yxllovewq

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

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

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

在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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@xiqi99520@DoubleBlock@chenjinWeb

        Issue actions

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