Vue源码解析之数据响应系统的使用(4)

日期：2020-05-11 栏目：程序人生浏览：次

function initData (vm: Component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 ? getData(data, vm)
 : data || {}
 if (!isPlainObject(data)) {
 data = {}
 process.env.NODE_ENV !== 'production' && warn(
  'data functions should return an object:\n' +
  'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  vm
 )
 }
 // proxy data on instance
 const keys = Object.keys(data)
 const props = vm.$options.props
 const methods = vm.$options.methods
 let i = keys.length
 while (i--) {
 const key = keys[i]
 if (process.env.NODE_ENV !== 'production') {
  if (methods && hasOwn(methods, key)) {
  warn(
   `Method "${key}" has already been defined as a data property.`,
   vm
  )
  }
 }
 if (props && hasOwn(props, key)) {
  process.env.NODE_ENV !== 'production' && warn(
  `The data property "${key}" is already declared as a prop. ` +
  `Use prop default value instead.`,
  vm
  )
 } else if (!isReserved(key)) {
  proxy(vm, `_data`, key)
 }
 }
 // observe data
 observe(data, true /* asRootData */)
}

内容有点多我们从上往下依次来看，首先是这样一段代码：

let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 ? getData(data, vm)
 : data || {}

我们知道在经过选项合并后，data已经变成一个函数了。那为何这里还有data是否是一个函数的判断呢？这是因为beforeCreate生命周期是在mergeOptions函数之后initState函数之前调用的，mergeOptions函数就是处理选项合并的。如果用户在beforeCreate中修改了vm.$options.data的值呢？那它就可能不是一个函数了，毕竟用户的操作是不可控的，所以这里还是有必要判断一下的。

正常情况下也就是data是一个函数，就会调用getData函数，并将data和Vue实例vm作为参数传过去。该函数也定义在当前页面中：

export function getData (data: Function, vm: Component): any {
 // #7573 disable dep collection when invoking data getters
 pushTarget()
 try {
 return data.call(vm, vm)
 } catch (e) {
 handleError(e, vm, `data()`)
 return {}
 } finally {
 popTarget()
 }
}

其实该函数就是通过调用data获取到数据对象并返回：data.call(vm, vm). 用try...catch包裹是为了捕获可能出现的错误，如果出错的话调用handleError函数并返回一个空对象。

函数的开头和结尾分别调用了pushTarget和popTarget, 这是为了防止使用 props 数据初始化 data 数据时收集冗余的依赖。

再回到initData函数中，所以现在data和vm._data就是最终的数据对象了。

接下来是一个if判断：

if (!isPlainObject(data)) {
 data = {}
 process.env.NODE_ENV !== 'production' && warn(
  'data functions should return an object:\n' +
  'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  vm
 )
 }

转载注明出处：https://www.heiqu.com/19.html

Vue源码解析之数据响应系统的使用(4)

相关推荐