Comments 12
let, window.fetch используете, а const и await — нет.
Вот этот кусок вообще не очень, если честно:
действуя таким образом вы создаете излишнюю связанность,
У Vue есть props для биндинга внешних данных, что повышает изолированность.
Попробуйте написать тест, для вашего компонента и сразу возникнут проблемы.
Аточки с запятой тормоза придумали трусы.
Вот этот кусок вообще не очень, если честно:
created () {
bus.$on('new_movie', movieId => {
this.movie = movieId
})
},
действуя таким образом вы создаете излишнюю связанность,
У Vue есть props для биндинга внешних данных, что повышает изолированность.
Попробуйте написать тест, для вашего компонента и сразу возникнут проблемы.
А
да тут вообще какой-то сумасшедший набор худших практик по js/css
Предлагаете тащить moveId через все компоненты из корня? Все равно ведь кто-то должен слушать событие `new_movie`…
Да вам вообще это шина не нужна.
Вы реализовали вместо иерархии плоскую структуру.
Из инструкции vue.js:
props down, events up
1. Ваш компонент, который делает fetchMovie() не должен ничего сам грузить, но даже если грузит, то должен кинуть событие наверх, что есть новый фильм. Это изменение вызовет изменение данных в родителе, который спустит новые данные в виде props в ребенка.
Соответственно:
2. Ребенок — компонент, который слушает ваш event сейчас, должен иметь это свойство.
А с текущим подходом, вы успешно теряете все бенефиты от immutability и всего того, что паттерн mediator приносит вобщем-то.
Доки.
Вы реализовали вместо иерархии плоскую структуру.
Из инструкции vue.js:
props down, events up
1. Ваш компонент, который делает fetchMovie() не должен ничего сам грузить, но даже если грузит, то должен кинуть событие наверх, что есть новый фильм. Это изменение вызовет изменение данных в родителе, который спустит новые данные в виде props в ребенка.
Соответственно:
2. Ребенок — компонент, который слушает ваш event сейчас, должен иметь это свойство.
А с текущим подходом, вы успешно теряете все бенефиты от immutability и всего того, что паттерн mediator приносит вобщем-то.
Доки.
Я реализовал?!
Приведенная вами картинка описывает взаимодействие компонентов и не запрещает компонентам иметь состояние. Точно так же как наличие специальных механизмов для взаимодействия компонентов вида не запрещают виду взаимодействовать с моделью.
Если что и ставить в вину автору кода — так это отсутствие явно выделенной модели; fetch-запрос с нетривиальной обработкой не должен был делаться из UI-компонента.
Модель, если уж на то пошло, там есть и, собственно, там все в ней и лежит.
Вообще все, даже то, что не мутирует и приходит снаружи — movie.
А картинка эта (иерархия, которая предполагается Vue) и использование props позволит сэкономить на перестроении DOM.
Bottomline.
Есть механизмы для того, чтобы написать все это, используя подходы из коробки дающие хорошую изоляцию компонентов(+реюзабилити, + тесты) и быстродействие.
Вместо этого пишется свой велик и декларируется, что вью — это круто.
А по факту из всего набора использовался только шаблонизатор.
Вообще все, даже то, что не мутирует и приходит снаружи — movie.
А картинка эта (иерархия, которая предполагается Vue) и использование props позволит сэкономить на перестроении DOM.
Bottomline.
Есть механизмы для того, чтобы написать все это, используя подходы из коробки дающие хорошую изоляцию компонентов(+реюзабилити, + тесты) и быстродействие.
Вместо этого пишется свой велик и декларируется, что вью — это круто.
А по факту из всего набора использовался только шаблонизатор.
Не понимаю, зачем переводить плохие статьи?
Как-то вообще немного не очень понятно, там нужно Review.vue и Reviews.vue? Или только Reviews.vue (а по тексту, в т.ч. в оригинале, ошибки)?
Хочу такие часы :)
UFO just landed and posted this here
Я не понял зачем для «шины» вызывается отдельный класс vue? Разве vuex не для этого сделан (обмен данными между компонентами)? Поправьте, если не прав…
Sign up to leave a comment.
Приложение реального времени на Vue.js