vue2.0 data为什么是函数

1、官网介绍

        当一个组件被定义，data 必须申明为返回一个初始数据的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个存粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始化数据的一个全新副本数据对象。

2、原理

是为了在重复创建实例的时候避免共享同一数据造成的数据污染

写函数的原因是为了保证这个对象是独立的，如果可以保证对象是唯一的，也可以不写函数直接写对象。其最终目的就是为了避免数据造成污染。

如果想了解这个问题就需要去了解 原型链 和 this.

3、寻找原型

        person1 和 person2 是 Person 的引用，所以当 person2 改变数据是实际上更改的是 Person 的数据。既然 Person 的数据改变了，所以 Person 的引用 person1 也会被改变

1.  
   function Person() {}
2.  
   Person.prototype.datas = {
3.  
   name: "test",
4.  
   age: 10
5.  
   }
6.  
   var person1 = new Person()
7.  
   var person2 = new Person()
8.  
   person2.datas.name = "addTest";
9.  
   console.log(person2)
10.  
    console.log(person1)

        问题：既然 person1 和 person2 都是 Person 的引用为什么放在对象里面会造成数据污染，但是放在方法里就不会造成数据污染了呢？

        回答：其实是和 this 的指向有关系，this 的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定 this 指向谁，实际上 this 指向调用它的对象。

        问题：你那明明指向的是同一个方法为什么会有不一样的？难道是克隆了？

        回答：定义在构造函数内部的方法，会在它的每一个实例上都克隆这个方法。定义在构造函数的 prototype 属性上的方法会让它的所有示例都共享这个方法，但是不会在每个实例都内部重新定义这个方法引用。

3、最终示例

1.  
   function Person () {
2.  
   this.getData = this.helloFun();
3.  
   }
4.  
    
5.  
   Person.prototype.helloFun = function() {
6.  
   return {
7.  
   name: 'test',
8.  
   age: 10
9.  
   }
10.  
    }
11.  
     
12.  
    var person1 = new Person();
13.  
    var person2 = new Person();
14.  
    person2.getData.name = 'addTest';
15.  
    console.log(person1)
16.  
    console.log(person2)

那问题在这里就解释清楚了，期待下一个问题。 

这篇好文章是转载于：学新通技术网