Принцип реализации мониторинга изменения данных отличается

Vue может точно знать изменения данных с помощью геттера/сеттера и перехвата некоторых функций и может достичь хорошей производительности без специальной оптимизации.
React по умолчанию для сравнения ссылок, если они не оптимизированы (PureComponent/shouldComponentUpdate), это может привести к большому количеству ненужного повторного рендеринга VDOM.

Почему React не может точно отслеживать изменения данных? Это связано с разницей в философии дизайна между Vue и React.Vue использует изменяемые данные, а React делает упор на неизменность данных. Так что следует сказать, что нет ничего хорошего или плохого, Vue проще, а React надежнее при создании больших приложений.

Поскольку обычно используется среда уровня данных, такая как Vuex и Redux, эта часть не будет слишком подробно объясняться, и она также будет упомянута в разнице между vuex и redux в конце.

Различные данные потока

Всем известно, что Vue по умолчанию поддерживает двустороннюю привязку. В Vue1.0 мы можем реализовать две двусторонние привязки:

Между родительским и дочерним компонентами свойства могут быть связаны в обоих направлениях.
Двусторонняя привязка между компонентами и DOM возможна через v-модель.

Первый был удален в Vue2.x, то есть двусторонняя привязка между родительским и дочерним компонентами больше невозможна (но предоставляется синтаксический сахар, который автоматически помогает вам изменять его через события), а Vue2.x отговаривает компоненты от собственных реквизитов для любых модификаций.
Итак, теперь у нас есть только двусторонняя привязка между компонентами DOM.

Однако React не поддерживает двустороннюю привязку с момента своего создания React всегда выступал за односторонний поток данных, который он называет паттерном onChange/setState().

Однако, поскольку мы обычно используем фреймворки управления состоянием, такие как Vuex и Redux, для одностороннего потока данных, мы часто не чувствуем разницы.

HoC и миксины

В Vue мы объединяем различные функции с помощью миксинов, а в React мы используем HoC (компоненты более высокого порядка).

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

Vue всегда реализовывался с использованием миксинов.

Почему Vue не реализует способ HoC?

Суть компонентов высшего порядка — это функции высшего порядка Компоненты React — это чистые функции, поэтому функции высшего порядка для React очень просты.

Но Vue не будет работать.Компонент в Vue представляет собой обернутую функцию, а не просто объект или функцию, передаваемую при определении компонента. Например, как компилируются определенные нами шаблоны? Например, как принимаются заявленные реквизиты? Все это неявно делает Vue, когда создает экземпляр компонента. Поскольку vue так много сделал для нас молча, если мы напрямую обернем объявление компонента и вернем компонент более высокого порядка, обернутый компонент не будет работать должным образом.

Порекомендуйте отличную статью о том, как реализовать компоненты более высокого порядка в vue Исследуйте компоненты более высокого порядка Vue

Различия в компонентной связи

На самом деле, эти две части очень похожи.

Существует три способа реализации взаимодействия компонентов в Vue:

Родительские компоненты передают данные или обратные вызовы дочерним компонентам через свойства.Хотя обратные вызовы могут быть переданы, мы обычно передаем только данные и обрабатываем связь от дочерних компонентов к родительским компонентам через механизм событий.
Дочерний компонент отправляет сообщение родительскому компоненту через событие
Благодаря новой функции предоставления/внедрения в версии 2.2.0 родительский компонент может вводить данные в дочерний компонент, который может охватывать несколько уровней.

Кроме того, есть такие, как посещение $parent/$ Здесь не будут обсуждаться дети и прочие грязные способы.

В React также есть три соответствующих способа:

Родительские компоненты могут передавать данные или обратные вызовы дочерним компонентам через свойства.
Межуровневая коммуникация может осуществляться через контекст, что фактически аналогично роли предоставления/внедрения.

Как видите, React сам по себе не поддерживает настраиваемые события.У дочерних компонентов есть два способа передачи сообщений родительским компонентам во Vue: события и функции обратного вызова, и Vue предпочитает использовать события. Но в React мы все используем обратные вызовы, и это, вероятно, самая большая разница между ними.

Различия в способах отображения шаблонов

На первый взгляд синтаксис шаблона отличается

React отображает шаблоны через JSX
Vue отображает с помощью расширенного синтаксиса HTML

Но на самом деле это всего лишь внешнее явление, ведь React не должен полагаться на JSX.

На глубинном уровне принципы работы шаблонов другие, и в этом их существенное отличие:

React находится в коде компонента JS, через общую грамматику в шаблоне, через собственный JS, такой как интерполяция, условие, цикл и т. Д., Все через синтаксис JS.
Vue реализован в отдельном шаблоне, отделенном от компонента JS-кода, например, если условное утверждение требует V-IF для реализации

Для этого я лично предпочитаю подход React, потому что он более чистый и нативный, в то время как подход Vue немного уникален и портит HTML. Пример, иллюстрирующий преимущества React:

Функция рендеринга в реакции поддерживает функцию замыкания, поэтому импортируемые нами компоненты можно вызывать непосредственно в рендере. Но во Vue, так как данные, используемые в шаблоне, должны быть связаны с этим для передачи, после того, как мы импортируем компонент, нам нужно объявить его снова в компонентах, что, очевидно, очень странно, но должно быть сделано.

Разница между Vuex и Redux

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

В Vuex $store внедряется непосредственно в экземпляр компонента, поэтому его можно использовать гибко:

Фиксация обновлений с использованием отправки и фиксации
Чтение данных через mapState или напрямую через this.$store

В Redux каждый из наших компонентов должен явно использовать соединение для подключения необходимых реквизитов и диспетчеризации.

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

Из принципа реализации самое большое отличие состоит в двух моментах:

Redux использует неизменяемые данные, а данные Vuex изменяемы. Redux каждый раз заменяет старое состояние новым состоянием, в то время как Vuex напрямую изменяет
Когда Redux обнаруживает изменения данных, он сравнивает различия через diff, а Vuex фактически такой же, как и Vue, сравнивается через геттер/сеттер (если вы посмотрите на исходный код Vuex, то поймете, на самом деле он напрямую создает Экземпляр Vue используется внутри для отслеживания изменений данных)

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

В первую очередь сделайте рекламу своим друзьям, это знают большие ребята в кругу и те, кто собирается вступить в круг,Определенный курс и недорогие ресурсы на различных платформах, таких как Geek, Kaikeba и т. Д., Пакетные обновления, в руках этого передового приятеля по разработке и в то же время для службы руководства интервью и технического руководства для тех, кто собирается войти в отрасль, добавьте его!