Vue | 面试——vue组件中的data为什么必须是一个函数

44 阅读1分钟

官网解释: image.png

从来没有想过为什么组件中的data是一个函数,只觉得就应该那么写。直到面试的时候被问了好多次,才意识到这个问题的重要性

归根结底:
组件是会被反复调用的,为了避免组件中的数据被污染,所以组件中的数据必须是一个函数而不能是一个对象

问题:
为什么定义对象数据会被污染,而函数就不会呢?这个还要从原型和原型链说起!

image.png

解释:
person1和person2访问person原型上的datas属性,当person1改变a的值时,我们发现person1和person2中a的值都变了,因为data时一个对象,时一个引用类型,person1和person2相当于引用的时同一个datas的地址,所以当person1修改datas中的a的时候,person2中a的值也改变了

那如果datas是一个函数呢?????

image.png

结果:

image.png

为什么呢?

定义在构造函数内部的方法,会在它的每一个实例上都克隆这个方法;
定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法