Prop默认值为什么要为工厂函数的形式返回?

prop默认值为什么要为工厂函数的形式返回?

// src\core\util\props.js Vue源码路径
/**
 * Get the default value of a prop.
 */
function getPropDefaultValue (vm: ?Component, prop: PropOptions, key: string): any {
  // no default, return undefined
  if (!hasOwn(prop, 'default')) {
    return undefined
  }
  // def  为 porps 默认值
  const def = prop.default
  // warn against non-factory defaults for Object & Array
  if (process.env.NODE_ENV !== 'production' && isObject(def)) {
    warn(
      'Invalid default value for prop "' + key + '": ' +
      'Props with type Object/Array must use a factory function ' +
      'to return the default value.',
      vm
    )
  }
  // the raw prop value was also undefined from previous render,
  // return previous default value to avoid unnecessary watcher trigger
  if (vm && vm.$options.propsData &&
    vm.$options.propsData[key] === undefined &&
    vm._props[key] !== undefined
  ) {
    return vm._props[key]
  }
  // call factory function for non-Function types
  // a value is Function if its prototype is function even across different execution context
  // 当 def 类型为函数 并且 prop.type 不为 Function 时 返回函数返回值,否则 返回当前默认值
  // 这里不是所有的都必须工厂函数返回
  return typeof def === 'function' && getType(prop.type) !== 'Function'
    ? def.call(vm)
    : def
}

你好,我想问的是原因,不是警告不允许,我就是看了源码不懂才来问的,能给我说说吗?

 return typeof def === 'function' && getType(prop.type) !== 'Function'
    ? def.call(vm)
    : def

因为源码就是这样判断的呀,而且上面回答我也写了注释的吧。。。

我要的是原因,不是源码是不是这么写的?而且你现在粘贴的已经是判断过后了,如果不是工厂函数返回的也不会存在问题,只是会发出警告。

原因就是,这里需要工厂函数返回的是针对数组或者对象,因为这两个是引用类型,不用函数返回则在子组件中修改这个对象或者数组本身,将会影响到父组件的状态。

1 Like