Lightning Five Whip: подробный анализ принципов Composition API

Предыдущая статья рассказывает о Vue3Composition APIПрактика его применения получила широкое признание среди мелких партнеров. Ссылки следующие:

Еще одна ночь, вы думаете, что эта практика Composition-API коротка?

как стремящийся武者, я еще хочу дать вам принцип弹一弹В конце концов, почему существуют эти ограничения и ограничения, так называемые знают, почему.

В этой статье исследуется следующее:

• Как могут гармонично сосуществовать композиция и варианты?
• Куда это указывает в настройках?
• Какие параметры настройки?
• Время выполнения настройки
• Как хуки жизненного цикла реализованы в настройке?

Теперь давайте начнем шоу闪电五连鞭,НАС点到为止

Первый кнут: как гармонично сосуществовать композиция и варианты?

Сяою представил состав API в vue3. Сначала многие люди боялись, что это повлияет на параметры, с которыми мы всегда были знакомы. На самом деле они могут сосуществовать и очень гармоничны. Кто сказал, что молодые люди не говорят о боевых действиях? искусства? Удар Сяою явно попал в точку~

Давайте посмотрим, как они гармонично сосуществуют в vue3:

Вывод: Здесь мы знаем логику обработки vue3 для настройки и других опций: если установлена ​​настройка, сначала вызвать ее, а затем обработать другие опции.

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

// data和setup中都定义了foo，那谁起作用哪？
createApp({
  data() {
    return {
      foo: 'foo'
    }
  },
  setup(props, ctx) {
    const foo = ref('foo in setup')      
    return { foo }
  }
}).mount('#app')

Сяою не фальшивый мастер, естественно, он闪

Второй хлыст: куда это указывает в настройках?

Смотрим, как часто вызывается процесс настройки:

Вывод: Таким образом, установка вthisконтекст, в котором он был выполнен, если онesmспособ упаковать, было быundefined; если работать как один файл, это будетwindow; но в любом случае это не имеет особого смысла, поэтому, пожалуйста, забудьте об этом напрочьthisНу, не беспокойтесь об этом больше.

Третий кнут: Какие параметры настройки?

Давайте посмотрим, что передается при выполнении установки:

Параметр 4 начинается с соответственноinstance.props,setupContext

посмотри сноваsetupContext

Вывод: Параметр 1 — это объект свойства компонента, которыйProxyобъект, поэтому мы не можем его деконструировать, иначе он перестанет отвечать на запросы; параметр 2 — это объект,attrsМожет получить доступ ко всем функциям компонента,slotsМожет получить доступ к содержимому слота, включая обычные слоты и слоты с ограниченной областью действия, которые являются функциями и могут быть получены только после выполнения.vnodeмножество.emitИспользуется для отправки пользовательских событий.

// 不能解构props, 可以解构setupContext
setup({ foo, bar }, { attrs, slots, emit }) {
	watchEffect(() => {
    console.log(foo, bar) // foo，bar发生变化，也不会有输出
  })
}

Четвертый хлыст: момент выполнения настройки

Время выполнения установки очень раннее, даже раньше, чем раньше Создано:

В заключение:setupнет внутриbeforeCreateа такжеcreated, соответствующий код написан наsetupВнутри все в порядке; экземпляр компонента будет передан при выполнении установки, поэтому его можно передать внутрьgetCurrentInstance()доступ к нему.

Пятый совет: как реализован хук жизненного цикла в настройках?

Хуки жизненного цикла можно гибко использовать в настройке, они могут быть написаны несколько раз и будут выполняться в порядке регистрации:

setup() {
  onMounted(() => {})
  onMounted(() => {})
}

Как это достигается? пойдем посмотримonMountedРеализация таких функций, как:

Взгляните на псевдонимы для этих хуков

Наконец, естественно, эти крючки называются

перебирать их

О принципе композиции闪电五连鞭Сначала позвоните сюда, есть проблемы? Пожалуйста, оставьте мне сообщение в разделе комментариев.

Если вам нравится смотреть обучающие видео, добро пожаловать вкозья деревняМагазин вокруг, эта статья также будет видео объяснение.

Молодежь должна говорить о боевых искусствах! ! !点赞,关注,收藏Все устроено! ! !

---

• это мыКоманда фронтенда Huaguoshanпроект с открытым исходным кодомelement3

• Библиотека компонентов внешнего интерфейса, поддерживающая vue3.

---