关于Vue中的data为什么必须是一个函数,咱们直接上源码:
在初始化data的时候,我们可以看到针对于data数据的处理
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
如果传过来的data是一个函数,那么就执行getData()这个工厂函数,
这样每一个实例的data都能够保持唯一性,独立性,互不干扰。
总结:
Vue组件可能存在多个实例,如果使用对象形式去定义data,会导致他们共用一个data对象,那么状态的变更就会影响所有组件实例,这很显然是不合理的;而采用函数形式定义,在初始化data时会将其作为一个工厂函数返回一个全新的data对象,有效规避多实例之间的污染问题。
还需注意的是,根实例创建过程没有这个限制,主要是因为根实例只能有一个,所以不需要担心数据相互污染的问题。