До появления Vue3.0 вы можете кое-что сделать

возобновить

Код обновил до картинки.Хотя кодовый блок не выделен, удобно ли видеть, что кодового блока нет? Если всем будет некомфортно, я поменяю обратно

предисловие

Интерес — лучший учитель, особенно для меня и других обезьян. Ознакомьтесь с API, раскрытым в VueConf. Есть только одно чувство, свободное как ветер~. В частности, я хочу испытать новую версию как можно скорее, и я также думал о том, чтобы смоделировать ее на основе Vue2.0~! Разница между боссом и мной в том, что я уже сделал это, когда подумал об этом~. Итак, перед Vue3.0 давайте интерпретируем исходный код большого парня, расширяем наши знания и стремимся к раннему...

главный герой

github: GitHub.com/v UE JS/v UE-pub…

Основное содержание статьи заключается в интерпретации исходного кода этой библиотеки. Репозиторий написан на машинописном языке, поэтому перед прочтением этой статьи вам необходимо:

typescriptосновы
правильноvueиметь некоторое глубокое понимание
Немного терпения, поскольку я, возможно, не был достаточно ясен

В заголовок

Рекомендуется проверить исходный код и посмотреть эту интересную библиотеку вместе со мной.

инициализация плагина

Здесь вам нужно понять процесс инициализации плагина vue.

С вопросом 1 давайте сначала посмотрим на реализацию метода установки

оVue.config.optionMergeStrategies.setupЕсли вы не понимаете, вы можете прочитать соответствующую статью. Я приведу здесь простой пример: в процессе разработки используйте метод mixin, правильноmountedПосле обработки жизненного цикла он снова используется в компоненте.mounted, вы найдете миксины и компонентыmountedСодержимое выполняется вместо переопределения в компоненте. ЭтоVue.config.optionMergeStrategiesэффект.
Когда вы видите проблему 2, проблема 1 решена. Когда подключаемый модуль vue инициализируется, первый параметр — это vue, второй — объект параметров, а входящий миксин — один из основных компонентов плагина.Если он передается как параметры, это выглядит странно~, поэтому после обработки метод установки является более подходящим.

Продолжайте видеть, что делает метод mixin? решить задачу 2

мы обнаруживаемmixinВнутри, только что угнанSetupHookEvent, Проверьте правильность настройки и смешайте ее перед созданиемwaitPropsResolvedметод

Помните вопрос 3, мы продолжаем смотреть внизwaitPropsResolvedСюда:

Сначала рассмотрим этот методsafeRunчто сделал метод

В safeRun: используйте часы, чтобы обернуть входящийinitSetupметод, а затем выполнить упакованный метод. Пока игнорируйте роль часов. Мы догадаемся о роли часов через некоторое время.

см. далееwaitPropsResolvedПроцесс выполнения:

Если методы не существуют, установите метод, вызовите SetupHookEvent, затем зафиксируйте установленное событие, выполнитеsafeRunметод

Если методы являются пустым объектом (то есть первый метод не найден), установите метод, вызовите SetupHookEvent, затем зафиксируйте установленное событие, выполнитеsafeRunметод

Если в методах есть метод, перехватите первый метод, а когда этот метод скопируется, выполнитеsafeRunметод

Вопрос 4: Почему триггер触发SetupHookEventПосле этого выполнитеsafeRun?

комбинироватьwaitPropsResolvedимя, я предполагаю, что это гарантируетpropsготов, потому чтоsetupМетод принимает параметр props. У трех вышеперечисленных есть одна общая черта: все они выполняются после назначения метода захвата.safeRun. Таким образом, вывод здесь таков: когда метод назначается, реквизит должен быть готов. (Я так думаю, я не проводил здесь глубоких исследований. Если что-то не так, пожалуйста, поправьте меня, добро пожаловать на обсуждение)

Вопрос 5: Почему входящийinitSetupМетод должен быть обернут в watch~, а не выполняться напрямую.initSetup?

Давайте сначала взглянем на метод watch, метод initSetup упакован как() => { initSetup(vm, props) }, переданный в качестве первого источника параметра, мы смотрим на этот исходный параметр

Продолжить просмотр createSingleSourceWatcher

Мы обнаружили, что источник был переименован здесьgetter, и передал его методу vue.$watch Для этого метода мы можем просто посмотреть документацию vue.

какие. Смущенный? Подводя итог, сначала посмотрите на порядок выполнения плагинов. давай продолжим`initSetup`метод.

Когда плагин инициализируется, дайте Vue глобальный миксинbeforeCreateметод
beforeCreateвыполнить в методеwaitPropsResolvedметод
waitPropsResolvedУбедившись, что реквизит готов в методе, поместитеinitSetupспособ передачиwatchметод
watchметод снова() => { initSetup(vm, props)передалvue.$watchохватывать

Таким образом, мы видим, что ядром этого плагина является зависимостьvue.$watch, выполнять один раз при изменении реквизитаinitSetup, мы продолжаем видетьinitSetupметод.

исполнительный компонентsetupметод
Обработать возвращенный объект, тип Wrapper — значение, обработанное по значению, и другие вызовыsetVmPropertyустановить на вм
компоненты можно использовать с удовольствием

Оставьте здесь небольшой хвостик, здесь нет объяснения метода значения, если вам интересно, вы можете изучить его самостоятельно ~

Процесс изучения исходного кода

Логика работы плагина очень понятна, исходный код обучения не выложен на гитхаб, расскажу о процессе моего обучения, так как этот плагин написан на ts, поэтому я использую vue для создания ts проект и импортировать исходный код этого плагина в проект, анализировать исходный код по крупицам, ссылаясь на локальные плагины. Если вам нравится учиться, вы также можете попробовать этот способ.Посредством отладки журнала и точки останова очень полезно понять исходный код.

Суммировать

До Vue3.0 используйте этот плагин, чтобы стать наркоманом.
Хотя принцип реализации в 3.0 определенно не такой, вы можете улучшить свои личные способности, изучив исходный код этого плагина.
Просто пишите так много, добро пожаловать на обмен, поправьте меня~
github: github.com/Kntt