在面试的过程中,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属性都是独立的,不会相互影响了.
所以,现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。其实vue不应该把这个方法名取为data(),应该叫setData或其他更容易理解的方法名
|