Рубрики
Без рубрики

Я создал одно и то же приложение в реакции и Vue. Вот различия.

Под Sunil Sandhu я создал то же приложение в реакции и Vue. Вот различия. Используется подержанные Vue на моем текущем рабочем месте, у меня было довольно твердое понимание того, как все это работает. Я был, однако, любопытно узнать, что такое трава на другой стороне

Автор оригинала: FreeCodeCamp Community Member.

от Sunil Sandhu

Используя Vue На моем текущем рабочем месте у меня было довольно твердое понимание того, как все это работает. Однако я был любопытно узнать, что такое трава на другой стороне забора – трава в этом сценарии реагирует.

Я бы прочитал реактивные документы и смотрел несколько учебных видео и, пока они были великолепны, и все, что я действительно хотел знать, было как разные Реагировать был из Vue Отказ

По «другим», я не имел в виду такие вещи, как имели ли они обоим Виртуальные домосы Или как они пошли о рендерингах страницы. Я хотел, чтобы кто-то потратил время, чтобы объяснить код и сказать мне, что происходит! Я хотел найти статью, которая нашла время, чтобы объяснить эти различия, чтобы кто-то был новым для Vue или Реагировать (или веб-разработка в целом) может получить лучшее понимание различий между двумя.

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

Я решил попытаться построить довольно стандартное для приложения, которое позволяет пользователю добавлять и удалять элементы из списка. Оба приложения были построены с использованием по умолчанию Клис ( Create-React-App для Rect и Vue-Cli для Vue ). CLI означает интерфейс командной строки кстати Отказ ?

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

Код CSS для обоих приложений точно так же, но есть различия в том, где они расположены. Имея в виду, давайте следующим посмотрим на структуру файла обоих приложений:

Вы увидите, что их структуры тоже практически идентичны. Единственная разница здесь заключается в том, что приложение React имеет три файла CSS, в то время как приложение Vue нет. Это потому, что в приложении Create-React-App, Компонент React будет иметь прилагаемый файл для удержания его стилей, тогда как Vue CLI принимает всеобъемлющий подход, в котором стили объявлены в фактическом компонентном файле Отказ

В конечном итоге они оба достигают то же самое, и нечего сказать, что вы не можете продолжать и структурировать ваши CSS по-разному в реакции или Vue. Это действительно сводится к личным предпочтениям – вы услышите множество обсуждений от сообщества DEV по поводу того, как должны быть структурированы CSS. На данный момент мы просто будем следовать за структурой, выложенной в обоих клире.

Но прежде чем мы пойдем дальше, давайте посмотрим на то, что выглядит типичный валютный компонент и актектор React:

Теперь это с пути, давайте попадаем в Nitty Gritty Detail!

Как мы мутируем данные?

Но во-первых, что мы даже имеем в виду под «мутационными данными»? Звучит немного техническим, не так ли? Он в основном просто означает изменение данных, которые мы сохранили. Поэтому, если мы хотели изменить значение имени человека от Иоанна, чтобы отметить, мы были бы «мутирующие данные».

Это где ложь ключевое различие между реактивными и Vue. В то время как Vue по существу создает объект данных, где данные могут свободно обновляться, Rect создает объект состояния, где требуется немного большегонарна для выполнения обновлений Отказ

Теперь отреагируйте дополнительную наручную работу с удивительной причиной, и мы попадаем в это немного. Но сначала давайте посмотрим на данные объект от Vue и Государство Объект от реагирования:

Таким образом, вы можете увидеть, что мы пропустили те же данные в обоих, но они просто помечены по-разному. Таким образом, проходящие исходные данные в наши компоненты очень, очень похожи. Но, как мы уже упоминали, как мы переходим к изменению этих данных, отличающихся между каркасами.

Допустим, у нас есть элемент данных под названием Имя: «Sunil» Отказ

В Vue, мы ссылаемся на это, позвонив Это. Немайте Отказ Мы также можем пойти в обновление этого, позвонив Это. Немайте = «Джон» Отказ Это изменило бы мое имя в Джоне. Я не уверен, как я чувствую, будучи называться Джоном, но эй, как вещи случаются! ?

В реакции мы будем ссылаться на то же количество данных, позвонив this.state.name Отказ Теперь ключевая разница вот что мы не можем просто написать this.state.name , потому что реагирование имеет ограничения на месте, чтобы предотвратить этот вид простого, беззаботного мутации. Так что в реакции мы бы написали что-нибудь по линии this.setState ({name: ‘John’}) Отказ

Хотя это по существу делает то же самое, что мы достигли в Vue, существует лишняя часть письма, потому что Vue по существу сочетает свою собственную версию SetState по умолчанию всякий раз, когда часть данных обновляется.

Так что короче говоря, Реагирование требует SetState, а затем обновленные данные внутри него, тогда как Vue делает предположение, что вы хотите сделать это, если вы обновляли значения внутри объекта данных Отказ

Почему реагируют даже беспокоиться с этим, и почему устанавливают даже необходимые? Давайте передам это на Revanth Кумар Для объяснения:

Теперь, когда у нас есть мутации, давайте попадаем в Nitty Gritty, посмотрев на то, как мы пойдем о добавлении новых предметов к нам обоим нашим приложениям.

Как мы создаем новые для предметов?

Реагировать:

createNewToDoItem = () => {
    this.setState( ({ list, todo }) => ({
      list: [
          ...list,
        {
          todo
        }
      ],
      todo: ''
    })
  );
};

Как реагировал это?

В реакции наше поле ввода имеет атрибут на нее называется значение. Это значение автоматически обновляется через использование нескольких функций, которые связывают вместе, чтобы создать что-то, что близко напоминает Двусторонняя переплета (Если вы никогда не слышали об этом ранее, есть более подробное объяснение в Как Vue делает это Секция после этого). Мы создаем эту форму двусторонней привязки, имея дополнительные Прослушатель событий Onchange прикреплен к вход поле.

Давайте быстро посмотрим на вход Поле, чтобы вы могли видеть, что происходит:

Функция ручки выполняется всякий раз, когда значение входного поля изменяется. Обновляет обновления Todo Это сидит внутри объекта состояния, установив его к тому, что находится в поле ввода. Эта функция выглядит как таковая:

handleInput = e => {
  this.setState({
    todo: e.target.value
  });
};

Теперь всякий раз, когда пользователь нажимает + Кнопка на странице, чтобы добавить новый элемент, CreateNewTodoitem Функция по существу запускается этой задачей и передает его функцией.

Эта функция принимает два параметра, первым является весь Список Массив из государственного объекта, второй – Todo (который обновляется Рубрикает Функция). Функция затем возвращает новый объект, который содержит весь Список от раньше, а затем добавляет Todo в конце этого. Весь список добавляется через использование оператора распространения (Google это, если вы не видели этого раньше – это синтаксис ES6).

Наконец, мы устанавливаем Todo к пустой строке, которая автоматически обновляет ценность внутри вход поле.

Vue:

createNewToDoItem() {
    this.list.push(
        {
            'todo': this.todo
        }
    );
    this.todo = '';
}

Как Vue делаю это?

В Vue, наш вход поле имеет ручку на нем под названием V-модель Отказ Это позволяет нам делать что-то известное как Двусторонняя переплета Отказ Давайте просто быстро посмотрим на наше поле ввода, то мы объясним, что происходит:

V-модельные галстуки вход этого поля к ключу у нас в нашем объекте данных под названием ToDoitem. Когда страница загружает, у нас есть Todoitem установить пустую строку, как таковой: Тодо: ” Отказ Если бы у этого были некоторые данные уже там, такие как Todo: «Добавить текст здесь» Наше поле ввода будет загружаться с Добавьте текст здесь уже внутри поля ввода.

В любом случае, возвращаясь к тому, чтобы иметь его в качестве пустой строки, какой бы текст мы вводим внутри входного поля, привязаны к значению для Todo Отказ Это эффективно двустороннее связывание (поле ввода может обновлять объект данных, а объект данных может обновить поле ввода).

Так что оглядываясь на CreateNewTodoitem () Блок кода с ранее мы видим, что мы нажимаем содержимое Todo в Список массив а потом обновите Todo к пустой строке.

Как мы удаляемся из списка?

Реагировать:

deleteItem = indexToDelete => {
    this.setState(({ list }) => ({
      list: list.filter((toDo, index) => index !== indexToDelete)
    }));
};

Как реагировал это?

Так что в то время как функция DeleteiteM находится внутри Todo.js Я был очень легко сделать ссылку на него внутри Todoitem.js Сначала проезжая deleteitem () Функция как опора на м/> как таковой:

Это передает функцию, чтобы сделать его доступным для ребенка. Вы увидите здесь, что мы также обязательно это а также передача параметра ключа, поскольку ключ в том, что функция будет использовать для дифференцировки между помощью которой Todoitem Мы пытаемся удалить при нажатии. Тогда внутри Todoitem Компонент, мы сделаем следующее:

-

Все, что мне нужно сделать, чтобы ссылаться на функцию, которая сидела внутри родительского компонента, была ссылаться на Это.props.deleteiTem Отказ

Vue:

onDeleteItem(todo){
  this.list = this.list.filter(item => item !== todo);
}

Как Vue делаю это?

Слегка другой подход требуется в Vue. Мы по сути должны сделать здесь три вещи:

Во-первых, на элементе мы хотим вызвать функцию:

-

Тогда мы должны создать функцию Emit в качестве метода внутри дочернего компонента (в этом случае ToDoitem.Vue ), который выглядит так:

deleteItem(todo) {
    this.$emit('delete', todo)
}

Наряду с этим вы заметите, что мы на самом деле ссылаемся на Функция Когда мы добавляем Todoitem.vue внутри Todo.vue :

Это то, что известно как Пользовательские события-слушателя Отказ Он слушает любое случаю, когда эмит срабатывает со строкой «Удалить» Отказ Если это слышит это, он вызывает функцию под названием OnDeleteItem Отказ Эта функция сидит внутри Todo.vue, а не Todoitem.vue Отказ Как мы обсуждали ранее, это просто фильтрует Todo массив внутри данные объект Чтобы удалить элемент, который нажал.

Также стоит отметить здесь, что в виде VUE, я мог бы просто написать $ Emit часть внутри @ yclick слушатель, как таковой:

-

Это уменьшило бы количество шагов вниз с 3 до 2, и это просто до личных предпочтений.

Короче говоря, Дочерние компоненты в реакции будут иметь доступ к родительским функциям через Это .props (Предоставление вы проходите реквизиты, что является довольно стандартной практикой – вы столкнетесь с этой нагрузкой в другие примеры реакций). Вуэ, с другой стороны, Вы должны излучать события от ребенка, который обычно собирается внутри родительского компонента Отказ

Как мы проходим слушатели событий?

Реагировать:

Прослушители событий для простых вещей, таких как события кликов являются простыми. Вот пример того, как мы создали событие Click для кнопки, которая создает новый элемент Todo:

+
.

Супер легко здесь, и в значительной степени выглядит как мы справились с онлайн OnClick с ванильными ся. Как уже упоминалось в разделе VUE, потребовалось немного больше времени для настройки слушателя события, когда нажата кнопка ENTER. Это по сути требуется OnkeyPress Мероприятие, которое будет обрабатываться в входном теге, как таковой:

.

Эта функция по существу вызвала CreateNewTodoitem Функция всякий раз, когда он признал, что ключ «Enter» был нажат, как таковой:

handleKeyPress = (e) => {
  if (e.key === 'Enter') {
    this.createNewToDoItem();
  }
};

Vue:

Вуэ это супер прямо вперед. Мы просто используем @ Символ, а затем тип событий-слушателя, который мы хотим сделать. Так, например, чтобы добавить прослушиватель событий Click, мы могли бы написать следующее:

+

Примечание: @ yclick на самом деле сокращение для написания V-on: нажмите Отказ Прохладная вещь с прослушивателями Vuue события заключается в том, что есть также куча вещей, которые вы можете цепи их, например .once , что предотвращает прослушиватель событий от срабатывания более одного раза. Также есть куча ярлыков, когда речь идет о написании конкретных слушателей событий для обработки ключевых ударов.

Я обнаружил, что потребовалось довольно дольше, чтобы создать слушатель события в React, чтобы создать новые элементы TODO, когда нажата кнопка ENTER. В VUE я смог просто написать:

Как мы передаем данные до дочернего компонента?

Реагировать:

В реакции мы проходим опоры на дочерний компонент в точке, где оно создано. Такой как:

Здесь мы видим, что два реквизита прошли к Todoitem составная часть. С этого момента мы можем теперь ссылаться на них в дочернем компоненте через Это .props Отказ Так что получить доступ к item.todo Проп, мы просто называем This.props.item Отказ

Vue:

В Vue мы проходим опоры на дочерний компонент в точке, где он создан. Такой как:

Как только это сделано, мы передаем их в массив реквизита в дочернем компоненте, как таковые: Реквизит: [«TODO»] Отказ Затем можно ссылаться на ребенка по имени – так в нашем случае «Тодо » ' Отказ

Как мы излучаем данные обратно на родительский компонент?

Реагировать:

Сначала мы передаем функцию до дочернего компонента, ссылаясь на него как опоры в том месте, где мы называем дочерний компонент. Затем мы добавляем вызов функции на ребенка любыми средствами, например OnClick Ссылаясь на Это. Которыеверенно изменены Отказ Затем он запускает функцию, которая находится в родительском компоненте.

Мы можем видеть пример всего этого процесса в разделе «Как мы удаляемся из списка».

Vue:

В нашем дочернем компоненте мы просто пишем функцию, которая испускает значение обратно в родительскую функцию. В нашем родительском компонент мы пишем функцию, которая слушает, когда это значение испускается, что затем может вызвать вызов функции. Мы можем видеть пример всего этого процесса в разделе «Как мы удаляемся из списка».

И там у нас это есть! ?

Мы смотрели на то, как мы добавляем, удалите и измените данные, передавайте данные в виде реквизит от родителя к ребенку и отправлять данные от ребенка на родитель в форме слушателей событий.

Существуют, конечно, множество других небольших различий и причудов между реагированными и VUE, но, надеюсь, содержание этой статьи помогло послужению основой для понимания того, как оба рамки обрабатывают вещи?

Если вы нашли это полезно, пожалуйста, поделитесь в социальных сетях и комментарии!

Github ссылки на обои приложения:

Vue ToDo: https://github.com/sunil-sandhu/vue-todo.

Реагировать TDO: https://github.com/sunil-sandhu/react-todo.

Это синдицированный репост для FreeCodecamp в сотрудничестве с JavaScript на простом английском Отказ Оригинальная версия этой статьи можно найти здесь .

Читайте ещё по теме: