【Vue】淘气三千问之 data为什么是函数而不是对象?这河狸吗

2021-09-26

朋友,当你提出以上问题的时候建议你先去复习下原型链的知识

但是我好人做到底直接就讲了吧,我们先看一下下面的这段代码:

function Component () {
  this.data = this.data      
}
Component.prototype.data = {
    name: '卡莲',
    gender: '女'  
}

  以后再放链接:

我们来分析一下假如是以下这种情况:

function Component(){
 
}
Component.prototype.data = {
    name:'卡莲',
    gender: '女'
}
var componentA = new Component();
var componentB = new Component();
componentA.data.gender="男";
console.log(componentA,componentB)

  说好只改变其中一个卡莲的性别,但是卡莲们不分彼此,公用一个接受信号的大脑,同时接收到了变成“男”的信号,结果他们都变成了“男”。

所以Vue需要function的帮助,每次都可以new出独立思考的,拥有独立大脑的卡莲,这次我们再尝试再发出一次信号:

function Component(){
 
}
Component.prototype.data = function () {
    name:'卡莲',
    gender: '女'
}
var componentA = new Component();
var componentB = new Component();
componentA.data.gender="男";
console.log(componentA,componentB)

  太好了,舰长大人,卡莲A是男,卡莲B是女,我们成功了。