data属性为何是一个函数
- 总而言之:为了防止组件复用相互影响。
从Vue组件的角度上理解
<body>
<div id="app">
<cop></cop>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cop = {
data() {
return {
num: 0
}
},
template: `
<div>
<div>{{num}}</div>
<button @click="num++">increase</button>
</div>
`
}
const vue = new Vue({
el: '#app',
components: {
cop
}
})
</script>
</body>
- 如果组件data不使用函数,则不法通过编译,直接报错。
- 这是因为如果可以用对象的话,那么每个复用的组件都会共用一个
num
因为对象的引用地址,而不是深拷贝。
从js上层面上理解
对象形式
class Father1 {
constructor() {
}
}
Father1.prototype.msg = {
data: 'msg'
};
const a = new Father1();
const b = new Father1();
a.msg.data = 'xxx';
console.log(a.msg, b.msg); // a:{data: "xxx"} b:{data: "xxx"}
//这里拿到的都是Father的原型,对象只是拿到的地址,就是浅拷贝。
// 所以一旦修改所有引用的都会修改
- 这里可以理解成data用对象的方式,一旦复用,所有的数据会影响。
函数形式
class Father2 {
constructor() {
this.msg = this.msg();
}
}
Father2.prototype.msg = function () {
return {
data: 'aaa'
}
}
const c = new Father2();
const d = new Father2();
c.msg.data = 'xxx';
console.log(c.msg, d.msg); // {data: "xxx"} {data: "aaa"}
这里每个实例(理解成组件)都会有自己独立的data
,这样避免复用data
共用的情况。
自己踩的继承原型的坑——有关继承、原型、修改原型上的函数返回值上的值的坑。。。