VueとSvelteの反応:データレンダリングの比較

データレンダリング.

ご覧のように、すべてのフレームワークは、データをループする独自の方法を持っています.
反応はmapメソッドを使用します、Vueはv-forメソッドを持ちます、そして、Svelteは{#each}{/each}アプローチで完全な口ひげ構文を賭けます.
チェックイットアウト🚀

反応する

Link

import { useState } from "react";
const [jobs, setJobs] = useState([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<ul>
  {
    jobs.map((job) => (
      <li>{job.title}</li>
    ))
  }
</ul>

Vue

Link

import { ref } from "vue";
// `reactive` could be used instead of `ref`
const jobs = ref([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<template>
<ul>
  <li v-for="job in jobs" :key="job.id">
    {{ job.title }}
  </li>
</ul>
</template>

スベルト

Link

const jobs = [
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
];

<ul>
{#each jobs as {id, title}, i}
  <li id={id}>
    {title}
  </li>
{/each}
</ul>