[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或其他更容易理解的方法名