Что такого хорошего в Vue3? (Подробное сравнение с React Hook)

предисловие

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

1. Структура кода спагетти Tucao:

«Это так разочаровывает. Все напутано в настройках, я мог бы также использовать реакцию напрямую»

Боже мой, если 3.0 так делает, то структура кода не ясна и не ясна семантика, что равносильно выбрасыванию плюсов самого Vue.

Как вы считаете, что структура кода не такая четкая, как в 2.0?😂 Если количество кода увеличится, будет ли сложно его поддерживать?

2. Реагировать на плагиат Tucao:

Копировать и копировать без собственной личности

У вас есть реактивный аромат? все больше нравится реагировать

На мой взгляд, темные дни Vue далеки от завершения, и многие люди на самом деле не смотрят на это всерьез.Vue-Composition-Apiв документации动机глава, этот документэта главадля подсказок, от代码结构,底层原理И так далее, чтобы рассеять некоторые из ваших опасений одно за другим.

В начале статьи в первую очередь хочу обозначить позицию автора, очень люблю React и Vue. Все они имеют свои преимущества и недостатки, и эта статья ни в коем случае не предназначена для того, чтобы вести к войне. Обе рамки хороши! Просто у каждого есть свои преимущества и недостатки. Immutable от React на самом деле дает много преимуществ, и идея Hook была впервые предложена большими парнями из команды Facebook. Это действительно потрясающий дизайн. Я приветствую React на 100%!

дизайн мотивация

Такой большой, как Vue3, всемирно популярный фреймворк, любойbreaking-changeДизайн должен быть хорошо продуманным и иметь компромиссы, тогдаcomposition-apiКакую проблему он решает? Это вопрос, над которым нам нужно подумать в первую очередь.

Сначала выбросьте несколько проблем в кодовом режиме Vue2.

1. По мере роста функциональности код сложных компонентов становится все труднее поддерживать. Особенно, когда вы новичок в чужом коде. Основная причина в том, что существующий API Vue организует код по «опциям», но в большинстве случаев имеет смысл организовывать код по логическим соображениям.
2. Отсутствует «чистый» механизм для извлечения и повторного использования логики в нескольких компонентах.
3. Вывод типа недостаточно дружелюбен.

повторное использование логики

Я считаю, что многие друзья, которые столкнулись с React Hook, имеют определенное представление о простоте логического повторного использования компонентов в этом режиме.С момента выпуска React 16.7 в сообществе появилось большое количество колес Hook и основных экологических библиотек. .react-router,react-reduxДождавшись, когда все примут Hook, можно увидеть, что коллеги по сообществу согласны с механизмом разработки Hook.

На самом деле, повторное использование логики компонентов прошло долгий процесс разработки в React.mixin -> HOC & render-props -> Hook,mixinЭто один из первых методов повторного использования логики, включенных в React, потому что его недостатки действительно очевидны.Бесчисленное количество, а последние два также имеют свои проблемы, такие как добавление вложенности компонентов, неясный источник реквизита и так далее. Можно сказать, что на данный момент Hook является относительно идеальным решением.

Конечно, мой постоянный стиль — сравнивать код, возьмем в качестве примера HOC, эта сцена появилась в реальном проекте с открытым исходным кодом на Github:

HOC против Крюка

class MenuBar extends React.Component {
  // props 里混合着来自各个HOC传入的属性，还有父组件传入的属性。
  handleClickNew() {
    const readyToReplaceProject = this.props.confirmReadyToReplaceProject(
      this.props.intl.formatMessage(sharedMessages.replaceProjectWarning)
    );
    this.props.onRequestCloseFile();
    if (readyToReplaceProject) {
      this.props.onClickNew(this.props.canSave && this.props.canCreateNew);
    }
    this.props.onRequestCloseFile();
  }
  handleClickRemix() {
    this.props.onClickRemix();
    this.props.onRequestCloseFile();
  }
  handleClickSave() {
    this.props.onClickSave();
    this.props.onRequestCloseFile();
  }
  handleClickSaveAsCopy() {
    this.props.onClickSaveAsCopy();
    this.props.onRequestCloseFile();
  }
}

export default compose(
  // 国际化
  injectIntl,
  // 菜单
  MenuBarHOC,
  // react-redux
  connect(mapStateToProps, mapDispatchToProps)
)(MenuBar);

Правильно, несколько HOC объединены с функцией compose, в том числе connect接受几个参数返回一个接受组件作为函数的函数Такого рода вещи, если вы новичок в таких вещах (или даже ветеран React), вы спросите: «Из какого HOC берутся эти реквизиты?», «Эти реквизиты передаются извне или получаются в HOC?» верно?" Потерял мозг на этих вопросах, и в итоге пошел под откос (ошибся).

Давайте не будем говорить о HOC, мой мозг вот-вот взорвется, давайте посмотрим, каково это — переиспользовать логику по пути Крюка?

function MenuBar(props) {
  // props 里只包含父组件传入的属性
  const { show } = props;
  // 菜单
  const { onClickRemix, onClickNew } = useMenuBar();
  // 国际化
  const { intl } = useIntl();
  // react-redux
  const { user } = useSelector((store) => store.user);
}

export default MenuBar;

Все становится очень ясным, я очень четко знаю источник этого метода,intlКуда впрыснул, нажалuseMenuBarПосле этого он автоматически перейдет к соответствующей логике, а обслуживание и читабельность значительно улучшатся.

Конечно, это более «преднамеренный» пример, но поверьте мне, я испытал такое преимущество при разработке React. Поскольку у компонентов появляется все больше и больше «обязанностей», пока вы овладеваете этой идеей организации кода, ваши компоненты не станут нечитаемыми.

Распространенные сценарии запроса

Еще один очень распространенный сценарий запроса.

В Vue2, если мне нужно запросить часть данных, а вloadingиerrorПри отображении соответствующего вида, в общем, напишем:

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
  </div>
</template>

<script>
import { createComponent, computed } from 'vue'

export default {
  data() {
    // 集中式的data定义 如果有其他逻辑相关的数据就很容易混乱
    return {
        data: {
            firstName: '',
            lastName: ''
        },
        loading: false,
        error: false,
    },
  },
  async created() {
      try {
        // 管理loading
        this.loading = true
        // 取数据
        const data = await this.$axios('/api/user')
        this.data = data
      } catch (e) {
        // 管理error
        this.error = true
      } finally {
        // 管理loading
        this.loading = false
      }
  },
  computed() {
      // 没人知道这个fullName和哪一部分的异步请求有关 和哪一部分的data有关 除非仔细阅读
      // 在组件大了以后更是如此
      fullName() {
          return this.data.firstName + this.data.lastName
      }
  }
}
</script>

Этот код вовсе не элегантен, он просто завершает функцию, и дляloading,errorВозможность повторного использования такой обработки равна нулю.

Данные и логика также разбросаны поoption, это просто логика, если логики больше, то большеdata,computed,methods? Если вы новый человек, который возьмет на себя этот файл, как вы можете быстро идентифицировать этот файл?methodда и какие-то дваdataсвязаны с полями в ?

давайте положимzeit/swrЛогика копируется на Vue3,

посмотриswrПроизводительность в Vue3:

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
  </div>
</template>

<script>
import { createComponent, computed } from 'vue'
import useSWR from 'vue-swr'

export default createComponent({
  setup() {
      // useSWR帮你管理好了取数、缓存、甚至标签页聚焦重新请求、甚至Suspense...
      const { data, loading, error } = useSWR('/api/user', fetcher)
      // 轻松的定义计算属性
      const fullName = computed(() => data.firstName + data.lastName)
      return { data, fullName, loading, error }
  }
})
</script>

Это так просто, верно? Логика более агрегирована.

Правильно, кстати,use-swrЕго сила намного больше, чем вы видите, и это лишь некоторые из его способностей:

1. Интервальный опрос

2. дедупликация запроса

3. Кэшировать данные для того же ключа

4. Оптимистичные обновления данных

5. Перезапустите запрос, когда вкладка находится в фокусе

6. Поддержка пагинации

7. Полная поддержка TypeScript

Подожди, подожди... И столько таких мощных способностей в маленькомuseSWR()Что касается функций, кто сказал, что это не волшебство?

Подобных примеров множество.

umi-hooks

react-use

организация кода

Столько всего было сказано выше, но только одно из достоинств Крюка. На самом деле это не решает проблему «спагетти-кода». Когда будет больше логики, не смешается ли логика компонентов и превратится в беспорядок?

Начиная с необходимости получить положение мыши

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

Пример пользовательского хука, официально предоставленного Vue, выглядит следующим образом:

import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => {
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });

  return { x, y };
}

Использование в компоненте:

import { useMousePosition } from "./mouse";

export default {
  setup() {
    const { x, y } = useMousePosition();
    // other logic...
    return { x, y };
  },
};

Это так просто, больше не нужно слов. Когда нам нужно «получить отзывчивое положение мыши» в любом компоненте и связать его с нашим «слоем просмотра», для этого требуется всего лишь простое предложение. и вернулся сюдаx,yОтrefОбработанную переменную ответа мы можем использоватьwatchСлушайте их, вы можете передать их другим пользовательским хукам, чтобы продолжать их использовать. Вы можете делать почти все, что захотите, просто используйте свое воображение.

Начнем с официального примера Vue.

Приведенный выше пример является вводным и достаточно кратким, чтобы привести нас к реальному миру. дать одинVue CLI UI file explorerПример официальных жалоб, этот компонент находится в gui Vue-CLI (то есть мы обычно вводим в командной строкеvue uiЭто сложный файловый браузер, компонент графической консоли, который вышел.Это написано боссом официальной команды Vue.Я считаю, что это более убедительный случай.

Этот компонент имеет следующие функции:

1. Отслеживание текущего состояния папки и отображение ее содержимого

2. Управление навигацией по папкам (открыть, закрыть, обновить...)

3. Обработка создания новых папок

4. Переключить Показать избранное

5. Переключить отображение скрытых папок

6. Обработка текущих изменений рабочего каталога

Документ поднимает острый вопрос души.Как новый разработчик, вы можетеmethod,data,computedМожете ли вы сразу определить, к какой функции относится эта переменная в опциях? Например, функция «создать новую папку» использует два свойства данных, вычисляемое свойство и метод, где метод определен «более чем в сотне строк» ​​от свойства данных.

При сохранении одной и той же логики необходимо охватить сотни строк «пространственного расстояния» в групповой цене, даже если меня попросят поддерживать код официальной команды Vue, я буду тайно жаловаться: «Что здесь написано? эта переменная используется для!"

Вы Да очень вдумчиво представили картинку, на которой разные цветовые блоки представляют разные функциональные точки.

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

А после использования Крюка? Мы можем красиво извлечь функцию «Новая папка» в функцию:

function useCreateFolder(openFolder) {
  // originally data properties
  const showNewFolder = ref(false);
  const newFolderName = ref("");

  // originally computed property
  const newFolderValid = computed(() => isValidMultiName(newFolderName.value));

  // originally a method
  async function createFolder() {
    if (!newFolderValid.value) return;
    const result = await mutate({
      mutation: FOLDER_CREATE,
      variables: {
        name: newFolderName.value,
      },
    });
    openFolder(result.data.folderCreate.path);
    newFolderName.value = "";
    showNewFolder.value = false;
  }

  return {
    showNewFolder,
    newFolderName,
    newFolderValid,
    createFolder,
  };
}

Мы согласны с тем, что эти «пользовательские хуки»useВ качестве префикса, чтобы отличить его от обычных функций.

Справа код после Hook используется для организации цветовых блоков:

Если мы хотим сохранить логику работы фиолетовой части, мы можем просто поискать ее в фиолетовой части.В любом случае, в других "цветных блоках" не будет переменных или методов, влияющих на нее.В ближайшее время мы изменим требования 6 Уходи с работы вовремя!

Это обзор компонентов в режиме Hook, который действительно ясен с первого взгляда. Я чувствую, что могу поддерживать@vue/uiВот он (фейк).

export default {
  setup() {
    // ...
  },
};

function useCurrentFolderData(networkState) {
  // ...
}

function useFolderNavigation({ networkState, currentFolderData }) {
  // ...
}

function useFavoriteFolder(currentFolderData) {
  // ...
}

function useHiddenFolders() {
  // ...
}

function useCreateFolder(openFolder) {
  // ...
}

Давайте взглянем на «спагетти-код», на который жаловалисьsetupфункция.

export default {
  setup() {
    // Network
    const { networkState } = useNetworkState();

    // Folder
    const { folders, currentFolderData } = useCurrentFolderData(networkState);
    const folderNavigation = useFolderNavigation({ networkState, currentFolderData });
    const { favoriteFolders, toggleFavorite } = useFavoriteFolders(currentFolderData);
    const { showHiddenFolders } = useHiddenFolders();
    const createFolder = useCreateFolder(folderNavigation.openFolder);

    // Current working directory
    resetCwdOnLeave();
    const { updateOnCwdChanged } = useCwdUtils();

    // Utils
    const { slicePath } = usePathUtils();

    return {
      networkState,
      folders,
      currentFolderData,
      folderNavigation,
      favoriteFolders,
      toggleFavorite,
      showHiddenFolders,
      createFolder,
      updateOnCwdChanged,
      slicePath,
    };
  },
};

Чья маленькая фея такая красивая! Эта логика слишком ясна, она не имеет ничего общего со спагетти!

В сравнении

Крюк против Миксина и HOC

Сказав это, мне все еще нужно разобраться с недостатками официального режима «Mixin & HOC».

1. Происхождение свойств, представленных в контексте рендеринга, неясно. Например, при использовании нескольких примесей для чтения шаблона компонента может быть сложно определить, из какой примеси введено конкретное свойство.
2. Конфликт пространства имен. Миксины могут конфликтовать с именами свойств и методов, в то время как HOC могут конфликтовать с ожидаемыми именами свойств.
3. Проблемы с производительностью, HOC и компоненты без рендеринга требуют дополнительных экземпляров компонентов с отслеживанием состояния, что снижает производительность.

Преимущества режима «Крючок»:

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

Конечно, у этой модели есть и некоторые недостатки, такие какrefУмственное бремя, вызванное, см.drawbacks.

React Hook против Vue Hook

На самом деле у React Hook очень много ограничений, например в официальной документации есть специальноеглаваПредставляем его ограничения:

1. Не вызывайте хуки в циклах, условных выражениях или вложенных функциях.
2. Обязательно всегда вызывайте их на верхнем уровне ваших функций React.
3. Следуя этому правилу, вы можете гарантировать, что хуки вызываются в одном и том же порядке при каждом рендеринге. Это позволяет React поддерживать правильное состояние ловушки при нескольких вызовах useState и useEffect.

Разница, которую приносит Vue, заключается в следующем:

1. Тот же уровень функциональности логической композиции, что и у React Hooks, но с некоторыми важными отличиями. В отличие от React Hooks,setupФункция вызывается только один раз, что является преимуществом в производительности.

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

3. Не нужно думать о проблеме почти всегда необходимости использования useCallback для предотвращения передачи函数propСсылки на дочерние компоненты изменяются, что приводит к ненужному повторному рендерингу.

4. У React Hook есть печально известная проблема с ловушкой закрытия (она даже стала популярным вопросом на собеседованиях, боже мой), useEffect и useMemo могут ловить устаревшие переменные, если пользователь забывает передать правильный массив зависимостей, на который эта проблема не влияет. Автоматическое отслеживание зависимостей Vue гарантирует, что наблюдатели и вычисляемые значения всегда верны.

5. Я должен упомянуть, что «зависимость» в React Hook необходимо объявлять вручную, и официально предоставляется плагин eslint.Хотя этот плагин полезен в большинстве случаев, иногда он очень раздражает и требует, чтобы вы вручную добавьте строку Уродливый комментарий, чтобы отключить его.

Мы признаем креативность React Hooks, которая является основным источником вдохновения для Vue-Composition-Api. Упомянутые выше проблемы действительно существуют в дизайне React Hook, и мы заметили, что реактивная модель Vue прекрасно решает эти проблемы.

Кстати, умственная нагрузка у React Hook действительно серьезная, если вам это интересно, то обращайтесь по ссылке:

Перевешивают ли преимущества использования реагирующих хуков затраты на его использование? - Ответ Ли Юаньцю - Ищу программистаУуху. Call.com/question/35…

И я сам столкнулся со многими проблемами в реальной разработке, особенно когда я хочу использовать компонентыmemoПри выполнении некоторых оптимизаций производительности проблема замыканий резко выявляется. Наконец я используюuseReducerДафа решил многие из этих проблем, и я должен задаться вопросом, будет ли это так от начала до конца.DanЗаговор... (Не пытайся сбежатьreducer)

React Hook + битва с корзиной покупок TS (оптимизация производительности, ловушки закрытия, пользовательские крючки)

принцип

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

Во Vue, почемуsetupФункция выполняется только один раз, и последующие обновления данных также могут управлять обновлениями представления. Суть в ее «механизме реагирования». Например, мы определяем такое свойство реагирования:

Vue

<template>
  <div>
    <span>{{count}}</span>
    <button @click="add"> +1 </button>
  </div>
</template>

export default {
    setup() {
        const count = ref(0)

        const add = () => count.value++

        return { count, add }
    }
}

Хотя он выполняется только один разsetupноcountВ принципе, это «отзывчивый объект», для которогоvalueизменения свойств,

Это вызовет повторное выполнение «функции рендеринга, скомпилированной из шаблона».

Если нужно вcountЧтобы что-то делать, когда что-то меняется, нам просто нужно ввестиeffectфункция:

<template>
  <div>
    <span>{{count}}</span>
    <button @click="add"> +1 </button>
  </div>
</template>

export default {
    setup() {
        const count = ref(0)

        const add = () => count.value++

        effect(function log(){
            console.log('count changed!', count.value)
        })

        return { count, add }
    }
}

этоlogФункция будет сгенерирована только один раз, эта функция читаетcount.valueсоберет его как зависимость, то в следующий разcount.valueПосле обновления может срабатывать естественноlogФункция выполняется повторно.

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

На самом деле, хуку Vue3 нужен только процесс «инициализации», то естьsetup, название точное. Его ключевое слово «выполнить только один раз».

React

Та же логика написана в React так:

export default function Counter() {
  const [count, setCount] = useState(0);

  const add = () => setCount((prev) => prev + 1);

  // 下文讲解用
  const [count2, setCount2] = useState(0);

  return (
    <div>
      <span>{count}</span>
      <button onClick={add}> +1 </button>
    </div>
  );
}

Это функция, и родительский компонент вводит ее через<Counter />Представленный таким образом, он фактически будет скомпилирован вReact.createElement(Counter)Такая функция выполняется, то есть при каждом ее рендеринге эта функция будет полностью выполняться один раз.

иuseStateвозвращениеcountиsetCountбудет сохранен в соответствующем компонентеFiberНапример, на узле порядок, в котором каждая функция React выполняет хук, должен быть одинаковым каждый раз. в этом примереuseStateВо время первого исполнения, так как оно выполнялось дваждыuseState,Будет вFiberсохранить{ value, setValue } -> { value2, setValue2 }такая структура связанного списка.

и следующий рендер будет выполненcount 的 useState,count2 的 useState, то как React получает отFiberКак насчет поиска значения, оставшегося от последнего рендеринга на узле? Конечно, найти их можно только по порядку.

Первое выполнение useState получает первое{ value, setValue }, второе выполнение получает второе{ value2, setValue2 },

Вот почему React строго ограничивает порядок выполнения хуков и запрещает условные вызовы.

Если первый рендеринг выполняет useState дважды, а первый useState отменяется условием if во втором рендеринге, то второйcount2 的 useStateВы получите значение первого элемента в связанном списке, что полностью сбивает с толку.

Если в React, чтобы слушатьcountизменения, чтобы что-то сделать, будет использоватьuseEffectтогда в следующий разrender

После этого будет два раза до и послеrenderполучено вuseEffectвторой параметрdepsВыполните неглубокое сравнение поэлементно в зависимости от значения (вызовите Object.is для каждого элемента по очереди), например

export default function Counter() {
  const [count, setCount] = useState(0);

  const add = () => setCount((prev) => prev + 1);

  useEffect(() => {
    console.log("count updated!", count);
  }, [count]);

  return (
    <div>
      <span>{count}</span>
      <button onClick={add}> +1 </button>
    </div>
  );
}

Затем, когда React узнает после рендерингаcountизменения будут реализованыuseEffectфункция обратного вызова в . (Вы можете внимательно наблюдать, каждый рендеринг будет перегенерировать ссылку на функцию, которая является первым параметром useEffect).

Да, React был неизбежно представлен依赖это понятие, но это依赖Это требует, чтобы мы писали вручную, и «умственная нагрузка», обсуждаемая в сообществе React в реальном времени, в основном связана с этим.依赖вызванный...

Поскольку каждый рендеринг будет продолжать выполняться и генерировать замыкания, он будет немного уступать Vue3 с точки зрения производительности и нагрузки на сборщик мусора. Его ключевое слово «повторно выполнять каждый рендеринг».

О плагиате React Hook

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

Вот прямая цитата Йоды в 17 годуотвечать«Vue рисует проход из виртуального дома»:

Скажи вдом. React vdom на самом деле не очень эффективен. Основная причина, по которой Vue 2.0 представила vdom, заключается в том, что vdom абстрагирует процесс рендеринга, что улучшает способность компонентов к абстракции и адаптируется к целям рендеринга, отличным от DOM. Бесспорно заимствование React, потому что я думаю, что vdom — действительно хорошая идея. Но должно быть ясно, что Vue представил vdom не потому, что «это есть в реакции, поэтому мы должны это иметь», а потому, что у него есть технические преимущества. Колеса, основанные на идее vdom в сообществе, исчезли, а уровень абстракции рендеринга ng2 и компиляция шаблона-> кода операции Ember Glimmer 2 также имеют много идеологического сходства с vdom.

Это предложение по-прежнему применимо к хукам сегодня.Все программисты отстаивают дух открытого исходного кода.Почему некоторые люди становятся скупыми, когда дело доходит до Vue и React? Грубо говоря, Vue сохраняет свою уникальность, поэтому, если вы перейдете в новую компанию и попросите вас использовать Vue, вам придется изучать ее заново.

Более того, в сообществе React также есть ссылка на Vue, как вы видите.react-router@6api, вы найдете много мест иvue-routerочень похожий. Например, «настроенная маршрутизация» useRoutes, структура кода создания подмаршрутов в компонентах и ​​т. д. Конечно, это всего лишь мое поверхностное понимание, и исправления приветствуются, если я ошибаюсь.

Расширенное чтение

Чтобы узнать о разнице между двумя крючками, студенты, которые хотят учиться дальше, могут также прочитать замечательную статью Хуан Цзыи:

Интенсивное чтение "API функций Vue3.0"

Подробное сравнение React Hook от You Xiaoyou в официальном выпуске:

Why remove time slicing from vue3?

Суммировать

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

Для кода спагетти:

1. Извлечение общих пользовательских хуков (при написании компонента корзины покупок React я извлек более 3 хуков, которые можно повторно использовать глобально).
2. Организуйте код на основе «логических функций», а неstateсобрать,methodСобрав все вместе, это по сути то же самое, что и использование Vue2 (многие новички совершают эту ошибку при использовании React Hook, включая меня).

Для умственной нагрузки:

1. Более мощные возможности означают больше затрат на обучение, но в целом, я думаю, что Vue3 хорошо справляется с умственной нагрузкой. заrefЭта вещь действительно требует тщательного осмысления, чтобы понять.
2. Умственное бремя React Hook уже хорошо известно.В моем реальном процессе разработки иногда я буду лысым... Особенно, когда я курю какие-то кастомные хуки,depsВ случае, когда зависимости передаются слой за слоем (любой слой зависимостей неверен, ваше приложение взорвется).
3. Если ты не учишься, как ты можешь получить повышение и прибавку к зарплате, жениться на Бай Фумэй и достичь вершины жизни! (бессмыслица)

Насколько ароматен Vue3? Даже автор книги «Управление состоянием в React и изоморфизм на практике» и преданный поклонник React.Lucas HCв этомВ чем преимущества Vue и React?Они сказали что-то вроде этого:

Я больше не буду разглагольствовать: фанат React приветствует Vue3.0!

У Vue3 также есть несколько попыток использования хуков:

GitHub.com/U3U/v UE — о, о, о…

Короче говоря, я надеюсь, что после прочтения этой статьи Vue3 вам понравится больше, и я уже с нетерпением жду его появления.

Наконец, чтобы еще раз подчеркнуть позицию автора, я очень люблю React и Vue. Все они имеют свои преимущества и недостатки, и эта статья ни в коем случае не предназначена для того, чтобы вести к войне. Обе рамки хороши! Просто у каждого есть свои преимущества и недостатки. Immutable от React на самом деле дает много преимуществ, и идея Hook была впервые предложена большими парнями из команды Facebook. Это действительно потрясающий дизайн. Я приветствую React на 100%!

Единственная цель этой статьи - устранить некоторые недоразумения моих друзей о Vue 3.0. У меня нет других намерений. Если есть какие-то обиды, пожалуйста, простите меня~

попросить лайк

Если эта статья была вам полезна, пожалуйста, поставьте лайк и поддержите ее. Ваш "лайк" - это движущая сила для меня, чтобы продолжать творить. Дайте мне знать, что вам нравится читать мою статью~

❤️ Всем спасибо

Обратите внимание на паблик-аккаунт "Front-end from advanced to Hospital" и получите возможность извлечь "Nuggets Booklet 50% код скидки"

Подпишитесь на официальную учетную запись и добавьте друзей, и вы войдете в «Внешнюю группу расширенного общения», где все могут общаться и вместе добиваться прогресса.