initProps

function initProps (vm: Component, propsOptions: Object) {

  `$options.propsData` 是在子组件创建 vnode 的过程中,将父组件传入的 props 保存为 propsData,
  之后在子组件合并配置时,合并到 $options 中
  const propsData = vm.$options.propsData || {}
  
  最终所有的 props 都会保存进实例的 _props 中 
  const props = vm._props = {}
  
  用于缓存
  const keys = vm.$options._propKeys = []

  取消 observer 观测		
  const isRoot = !vm.$parent
  if (!isRoot) {
    toggleObserving(false)
  }
  
  for (const key in propsOptions) {
    keys.push(key)
    
    校验类型并取值
    const value = validateProp(key, propsOptions, propsData, vm)
    
    将key 添加到实例的 _props 中
    defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })
  }
  toggleObserving(true)
}
  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值