为什么vue中的data必须是一个函数？

概述

1. 引用类型与函数区别

引用类型与函数

object是引用类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了。

js中只有函数构成作用域（只有函数的{}构成作用域，对象的{}以及if(){}都不构成作用域），data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会互相影响。

用法

JS中有三种执行上下文类型：

const MyComponent = function(){};
MyComponent.prototype.data = {
  a:1,
  b:2
}
const component1 = new MyComponent();
const component2 = new MyComponent();

component1.data.a  = component2.data.a;
component1.data.b = 5;
component2.data.b  // 5

如果两个实例引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着改；

两个实例必须有自己各自的作用域才行，需要通过下列方法进行处理

const Mycomponent = function(){
  this.data = this.data();
}
Mycomponent.prototype.data = function(){
  return {
    a: 1,
    b: 2 
  }
}

这样每一个实例的data属性都是独立的，不会互相影响。

这是js本身的特性带来的，跟vue本身设计无关。

参考：

• https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
• https://www.jianshu.com/p/839cbef3be41