React, Vue3, стиль письма Svelte PK

React、Vue3、Svelte В этой статье будут сравниваться различия в использовании трех популярных компонентов с точки зрения скорости отклика, шаблонов, жизненного цикла, компонентов, форм и сетевых запросов.

Реактивный — состояние

Реагировать

import { useState } from "react";

export default function Name() {
  const [name] = useState("Xiuer");
  return <h1>Hello {name}</h1>;
}

Посмотреть 3

<script setup>
import { ref } from "vue";
const name = ref("Xiuer");
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Стройный

<script>
  let name = "Old Xiuer";
</script>

<h1>Hello {name}</h1>

Реактивный — обновить статус

Реагировать

import { useState } from "react";

export default function Name() {
  const [name, setName] = useState("Xiuer");
  setName("Jane");
  return <h1>Hello {name}</h1>;
}

Посмотреть 3

<script setup>
import { ref } from "vue";
const name = ref("Xiuer");
name.value = "Jane";
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Стройный

<script>
  let name = "Xiuer";
  name = "Jane";
</script>

<h1>Hello {name}</h1>

Реактивный — государственные вычисления

Реагировать

import { useState } from "react";

export default function DoubleCount() {
  const [count] = useState(10);
  const doubleCount = count * 2;
  return <div>{doubleCount}</div>;
}

Посмотреть 3

<script setup>
import { ref, computed } from "vue";
const count = ref(10);
const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>{{ doubleCount }}</div>
</template>

Стройный

<script>
  let count = 10;
  $: doubleCount = count * 2;
</script>

<div>{doubleCount}</div>

шаблон — минимальный шаблон

Реагировать

export default function HelloWorld() {
  return <h1>Hello World</h1>;
}

Посмотреть 3