为什么vue中的data用return返回呢？

发表于 更新于 分类于

为什么要把 data 变成函数并 return 属性

组件是一个可复用的实例，当你引用一个组件的时候，组件里的 data 是一个普通的对象，所有用到这个组件的都引用的同一个 data，就会造成数据污染。

vue 中 data 是否使用 return 的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Vue实例中data属性是如下方式展示的：
let app = newVue({
  el: "#app",
  data: { msg: "" },
  methods: {}
});
// 使用组件化的项目中是如下方式展示的:
export default {
  data() {
    return {
      showLogin: true,
      msg: ""
    };
  },
  methods: {}
};

将 data 封装成函数后，在实例化组件的时候，我们只是调用了 data 函数生成的数据副本，避免了数据污染。

不使用 return 包裹的数据会在项目的全局可见，会造成变量污染；使用 return 包裹后数据中变量只在当前组件中生效，不会影响其他组件。

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。

如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。