为何组件的data必须是一个函数

278 阅读2分钟

为什么组件的data必须是一个函数呢?

首先我们看看官方的解释

vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。

那么,我们如何优雅的回答出这道题目的标准答案呢?你得知道以下几个问题

什么是函数?

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。js函数语法,函数就是包裹在花括号中的代码块,前面使用了关键词 function: 当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

优雅回答:

1.在Vue中根实例的data可以是对象也可以是函数, 但是在组件中的data必须要是一个函数, 组件就是可以复用的Vue实例, 把公共的模块抽离出来, 达到复用和直接使用的效果. 接下来我会采用对比的方式进行说明.

2.如果data是一个对象的话, 对象是一个引用类型; 它会在堆空间中开辟一片区域, 将内存地址存入. 这就使得所有的组件公共一个data, 当一个组件中修改了data中的数据就会出现一变全变的现象.

3.如果data是一个函数的话, 且使用return返回一个对象; 这就使得每复用一次组件就会返回一个全新的data,其他复用地方组件的data数据不受影响,保证了数据的独立性和复用性(这就相当于scoped, 每一个组件data都是私有的, 互不干扰, 各个组件维护自己的data)