很多小伙伴可能不清楚为什么VUE组件中data只能是函数,而不能用对象,那么我就在此解答一下
下面是大家平时用VUE组件的时候的data展现 ↓↓↓
Vue.component('ProductItem'),{
template:`
<div class='num-item'>
<p>数值: {{num}} </p><button @click='addNum'>点击++</button>
</div>,
data(){
return {
num:1
}
},
methods:{
addNum(){
this.num++
}
}
})
区别在于函数与对象之间数据的存放
传统分类通过存储位置 把数据类型分为 基础类型 和 引用类型
而对象属于引用类型
不同于其他基础类型,对象的数据储存位置不在栈内存中,而在堆内存中,栈内存中只储存相对应的指针,指向堆内存中的地址
下面举个例子:
let obj = {
a:1
}
function add(o){
o.a++
console.log(o.a)
}
add(obj)//2
add(obj)//3
add(obj)//4
调用多次结果会叠加的原因是obj是引用类型,add()函数三次全部操作的都是全局作用域下的obj对象,给 obj 里面的 a 进行增量。
function createObj(){
return{
a:1
}
}
function add(o){
o.a++
console.log(o.a)
}
add(createObj())//2
add(createObj())//2
add(createObj())//2
这里的结果为什么都是2呢,是因为这里add()函数处理的是由函数createObj return出来的对象,这三个对象长得一样,但是他们存放数据的地址不同,所以在调用函数add()对其中数据进行处理的时候,是分别对三个对象中的数据进行处理,是具有独立性的。
回到最上面的问题,为什么VUE组件里的data必须是个函数 ???
因为组件需要复用!!!
如果使用对象的话,当某一次对组件进行数据上的操作的时候,会影响到其他使用这个组件的地方,造成变量污染,违背了组件高内距低耦合的性质。
以上就是个人经验的总结,如果还有什么问题欢迎评论提问, 或者查看其他答主更加优秀的讲解
作者:Hi_Akai,转载请注明出处!!!