关于前端:为什么Vue2的data是一个函数或者方法面试题

官网解释：当一个组件被定义，data 必须申明为返回一个初始数据对象的函数，因为组件可能被用来创立多个实例。
如果 data 依然是一个纯正的对象，则所有的实例将共享援用同一个数据对象！通过提供 data 函数，每次创立一个新实例后，咱们可能调用 data 函数，从而返回初始数据的一个全新正本数据对象。
我看到这个问题的时候是我面试的时候一个面试官问我的，过后懵了，素来没有想过为什么，只晓得代码须要这么写。最近有空再来理解一下这部分的原理内容。有两个我比拟喜爱答复
1. 是为了在反复创立实例的时候防止共享同一数据造成的数据净化

2. 写函数的起因是为了保障这个对象是独立的，如果能够保障对象是惟一的, 也能够不写函数间接写对象。

其实归根结底就是为了防止数据净化。
咱们想要解决这个问题就不得不说 原型链和 this。

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

    function 
    Person(){} 
    Person.prototype.datas={   
    a:"c",   
    f:'h' } 
    var person1 = new Person() 
    var person2 = new Person() 
    person2.datas.a="wewew" 
    console.log(person2) 
    console.log(person1)

我之前始终有一个疑难既然 person1 和 person2 都是 Person 的援用为什么放在对象外面会造成数据净化然而放在办法里就不会造成数据净化了呢？首先要晓得一句话：this 的指向在函数定义的时候是确定不了的，只有在函数执行的时候能力确定 this 到底指向谁
实际上 this 指向调用它的对象。又有一个疑难了，明明指向的是同一个办法为什么会有不一样的呢？难道克隆了一个？答案：定义在构造函数外部的办法, 会在它的每一个实例上都克隆这个办法; 定义在构造函数的 prototype 属性上的办法会让它的所有示例都共享这个办法, 然而不会在每个实例的外部从新定义这个办法援用：

    function Person(){this.datas = this.sayHello()//this 指向调用它的对象  
    }  
    Person.prototype.sayHello = function () {      
    return{        
    d:1,        
    b:2      
    }    
    };  
    var person1 = new Person()  
    var person2 = new Person()  
    person2.datas.d="wewew"  
    console.log(person1)  
    console.log(person2)

具体例子如下 1. 失常状态当应用 data 函数的时候没有造成数据净化

    <template>  
    <div>    
    <div>{{count}}</div>    
    <button @click="onAdd"> 减少 </button>  
    </div>
    </template>
    <script>
    export default {data() {    
    return {count: 0};  
    },  
    methods: {onAdd() {this.count++;},  
    },
    };
    </script>
    <br>
    </em>
    <template>  
    <div class="home">    
    <button-test></button-test>    
    <button-test></button-test>  
    </div>
    </template>  
    <script>
    import ButtonTest from "@/components/ButtonTest.vue";
    export default {  
    name: "Home",  
    components: {ButtonTest,},
    };
    </script>

2. 若 data 间接定义成一个对象则会报错

3. 定义一个内部对象的模式，后果点击一个按钮，两个数据同时减少，造成数据净化

看个例子