vue3 options模式

applyOptions

外部

内部

1.resolveMergedOptions

2.beforeCreate

3.resolveInjections

js 复制代码

    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;

4.methods

js 复制代码

   Object.defineProperty(ctx, key, {
            value: methodHandler.bind(publicThis),
            configurable: true,
            enumerable: true,
            writable: true
          });
        } else {
          ctx[key] = methodHandler.bind(publicThis);

5.dataOptions

js 复制代码

    const data = dataOptions.call(publicThis, publicThis);

6.computedOptions

js 复制代码

 for (const key in computedOptions) {
      const opt = computedOptions[key];
      const get =  opt.get.bind(publicThis, publicThis)
      const set = opt.set.bind(publicThis）
      const c = computed({
        get,
        set
      });
      Object.defineProperty(ctx, key, {
        enumerable: true,
        configurable: true,
        get: () => c.value,
        set: (v) => c.value = v
      });

7.watchOptions

js 复制代码

 for (const key in watchOptions) {
      createWatcher(watchOptions[key], ctx, publicThis, key);
    }
    
  const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
    const handler = ctx[raw];
   const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];

 watch(getter, handler);
 watch(getter, raw.bind(publicThis));
 watch(getter, handler, raw);

8.provideOptions

js 复制代码

  let provides = currentInstance.provides;
    const parentProvides = currentInstance.parent && currentInstance.parent.provides;
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides);
    }
    provides[key] = value;
    if (currentInstance.type.mpType === "app") {
      currentInstance.appContext.app.provide(key, value);
    }

9.created

js 复制代码

    callHook$1(created, instance, "c");

10.registerLifecycleHook

js 复制代码

  function registerLifecycleHook(register, hook) {
    if (isArray(hook)) {
      hook.forEach((_hook) => register(_hook.bind(publicThis)));
    } else if (hook) {
      register(hook.bind(publicThis));
    }
  }
  registerLifecycleHook(onBeforeMount, beforeMount);
  registerLifecycleHook(onMounted, mounted);
  registerLifecycleHook(onBeforeUpdate, beforeUpdate);
  registerLifecycleHook(onUpdated, updated);
  registerLifecycleHook(onActivated, activated);
  registerLifecycleHook(onDeactivated, deactivated);
  registerLifecycleHook(onErrorCaptured, errorCaptured);
  registerLifecycleHook(onRenderTracked, renderTracked);
  registerLifecycleHook(onRenderTriggered, renderTriggered);
  registerLifecycleHook(onBeforeUnmount, beforeUnmount);
  registerLifecycleHook(onUnmounted, unmounted);
  registerLifecycleHook(onServerPrefetch, serverPrefetch);

11.expose

js 复制代码

 if (isArray(expose)) {
    if (expose.length) {
      const exposed = instance.exposed || (instance.exposed = {});
      expose.forEach((key) => {
        Object.defineProperty(exposed, key, {
          get: () => publicThis[key],
          set: (val) => publicThis[key] = val
        });
      });
    } else if (!instance.exposed) {
      instance.exposed = {};
    }
  }

11.render

js 复制代码

if (render && instance.render === NOOP) {
    instance.render = render;
  }

12.inheritAttrs

js 复制代码

 if (inheritAttrs != null) {
    instance.inheritAttrs = inheritAttrs;
  }

13.components

js 复制代码

 if (components)
    instance.components = components;

14.directives

js 复制代码

  if (directives)
    instance.directives = directives;

15.customApplyOptions

js 复制代码

  const customApplyOptions = instance.appContext.config.globalProperties.$applyOptions;
if (customApplyOptions) {
    customApplyOptions(options, instance, publicThis);
  }