Чтобы помочь мне узнать и лучше понимать, я собираюсь написать серию постов, которые сравнивают React и Vue, и как каждая структура кодирует некоторые из самых фундаментальных концепций программирования. Этот пост (и эта серия) не пытается претендовать на то, что он лучше другой. Они оба очень хорошо и популярны. Цель состоит в том, чтобы увеличить понимание, глядя на сходство и различия.
Для петель (итерация) в компоненте Vuejs
Так как вы пишите через массив предметов в Vue? Вот пример от Vue Docs:
- {{ item.message }}
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
Итайте через тот же массив в компоненте реагирования
const items = [
{ message: 'Foo' },
{ message: 'Bar' }
];
function App() {
return (
{items.map((message, index) => (
{message}
))}
);
}
Мои вынос
Для начинающих, которые только начинают с JS Frameworks, я могу понять, почему они хотели бы больше. В Vue компонентах HTML аккуратно разделен от JavaScript и CSS. Использование директив Vue, таких как V-для семантический и находится внутри элемента, который будет повторяться. Довольно круто, если вы новичок в JS Frameworks.
Для более опытных разработчиков, которые в течение многих лет пишут ванильные JS, я могу понять, почему они предпочли бы Jsx. путь с реакцией , писать для петлей внутри некоторых HTML.
Вывод
Это вопрос личных предпочтений и, возможно, где вы находитесь в вашем доработке. Для менее опытных кодеров Vue структурирует свои компоненты дружелюбным интуитивным способом и предоставляет директивы Vue из коробки для выполнения петли массива.
Без предыдущего опыта работы с JSX React потребуется некоторого времени в начале, чтобы узнать, как React оказывает свои компоненты.
Я вентилятор обоих рамок, и с нетерпением жду сравнения другого простого аспекта программирования в моем следующем посте. Оставайтесь настроиться и спасибо за чтение.
фото CDC на Бессмысленно
Оригинал: “https://dev.to/simonhlee97/comparing-react-and-vue-part-1-572n”