美文网首页
vue源码 (1.初始化过程_init)

vue源码 (1.初始化过程_init)

作者: 奇怪的双子座 | 来源:发表于2021-10-21 15:10 被阅读0次

    1.在init阶段inject 是比 provide更早,比initState(initProps、initMethods、initComputed、initWatch) 都要早,因为vue的组件层级创建父组件created后再去创建子组件,一层一层向下创建的模式,那么inject如果有在上级组件定义provide,那么都会拿得到,而methods、computed、watch也有可能会用到 inject的值,所以需要放在最先初始化。

    2.initInjections 原理

    export function resolveInject (inject: any, vm: Component): ?Object {
      if (inject) {
        // inject is :any because flow is not smart enough to figure out cached
        const result = Object.create(null)
        const keys = hasSymbol
          ? Reflect.ownKeys(inject)
          : Object.keys(inject)
    
        for (let i = 0; i < keys.length; i++) {
          const key = keys[i]
          // #6574 in case the inject object is observed...
          if (key === '__ob__') continue
          const provideKey = inject[key].from
          let source = vm
          //**********************************主要在这段**********************************
          while (source) {
            if (source._provided && hasOwn(source._provided, provideKey)) {
              result[key] = source._provided[provideKey]
              break
            }
            source = source.$parent
          }
          if (!source) {
            if ('default' in inject[key]) {
              const provideDefault = inject[key].default
              result[key] = typeof provideDefault === 'function'
                ? provideDefault.call(vm)
                : provideDefault
            } else if (process.env.NODE_ENV !== 'production') {
              warn(`Injection "${key}" not found`, vm)
            }
          }
        }
        return result
      }
    }
    
    

    3.beforeCreate生命周期为什么不能访问数据,能访问到什么

       //初始化关系属性$parent $children vm.$root
        initLifecycle(vm)
        //初始化自定义事件 this.$emit('aaa') this.$on('aaa',handleFunc) 
        initEvents(vm)
        // vm.$slots vm.$scopedSlots vm._c vm.$createElement初始化插槽
        initRender(vm)
        //执行beforeCreate生命周期函数(beforeCreate不能访问数据,)
        callHook(vm, 'beforeCreate')
    

    4.initEvents 事件是挂在父组件执行还是当前组件this.$emit的组件

     //初始化自定义事件 所以最终还是在当前组件 this.$emit('aaa') this.$on('aaa',handleFunc) ,
     initEvents(vm)
    

    5.有el选项为什么可以不需要$mount

      if (vm.$options.el) {
          vm.$mount(vm.$options.el)
     }
    

    相关文章

      网友评论

          本文标题:vue源码 (1.初始化过程_init)

          本文链接:https://www.haomeiwen.com/subject/wkifaltx.html