在面试的过程中，vue的相关问题是稳的最多的，所以现在，我们说个比较常见，但是不是特别很好回答的面试题：vue组件中data为什么必须是一个函数
简单的说：
[JavaScript] 纯文本查看 复制代码 //为什么data函数里面要return一个对象
<script>
export default {
data() {
return { // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
name: '王云飞',
age: '20多岁'
}
}
}
</script>
因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。
详细解读：
类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。
[JavaScript] 纯文本查看 复制代码 <script>
const myComponent = function () {};
myComponent.prototype.data = {
a: 1,
b: 2
}
const component1 = new myComponent()
const component2 = new myComponent()
console.log(component1.data.a === component2.data.a) // true
component1.data.b = 5
console.log(component2.data.b) // 5
</script>
// 如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
[JavaScript] 纯文本查看 复制代码 <script>
const myComponent = function () {
this.data = this.data()
};
myComponent.prototype.data = function () {
return {
a: 1,
b: 2
}
}
const component1 = new myComponent()
const component2 = new myComponent()
console.log(component1.data.a === component2.data.a) // true
component1.data.b = 5
console.log(component2.data.b) // 2
</script>
// 这样么一个实例的data属性都是独立的,不会相互影响了.
| 
收藏
淘帖
踩
