Общий вариант использования, с которым мы сталкиваемся, необходимо показать данные, извлеченные из API с использованием компонента VUE.
Например, скажем, у нас есть компонент VUE под названием ViewAvenger.Vue который показывает информацию Мстителя на основе его идентификатора. Обычным способом сделать это, передавая id Опора в наш компонент. Фактический вызов API затем обрабатывается самим компонентом с помощью вызова метода получить данные .
Загрузка данных на крепление
Скажем, мы хотим немедленно получить наши данные, когда компонент креплю. Затем добавляем монтированный Метод жизненного цикла в наш компонент.
Перезагрузить данные, если идентификатор изменится
Это работает нормально, но что, если наш id Замена опоры? У нас не было бы никакого способа позвонить getData Анкет Для этого нам нужно было бы смотреть id опора для изменений.
Определяя Наблюдатель , мы говорим нашему компоненту, чтобы вызвать получить данные Метод, когда id опора изменяется.
Рефакторинг для упрощения!
Наш компонент работает просто отлично, как сейчас. Однако как мы можем переписать его, чтобы быть более кратким? Мы используем смотреть реквизит!
Наблюдатели могут иметь немедленное опора, которая сообщает компоненту немедленно запустить метод обработчика. Это означает, что мы можем избавиться от монтированный Метод, сэкономив нам несколько строк кода.
Наконец, мы можем упростить это еще дальше! Мы можем переместить все наши получить данные функционируйте в обработчик часов. В качестве дополнительного бонуса к читабельности мы можем удалить это. Префикс из вызова API, так как мы можем просто использовать я бы Аргумент функции обработчика!
И так же, мы эффективно спасли себя еще несколько строк кода. Надеюсь, вы нашли этот совет полезным, и спасибо за чтение!
Оригинал: “https://dev.to/mccabiles/quick-vue-tip-cleaner-data-fetching-12ao”