VueとSvelteの反応:状態更新の比較

状態の更新.

上述したように、反応はsetState法を有する.属性を更新するには、直接使用するか、別の関数でラップできます.
svelteがちょうどコンパイラであるので、あなたがJavaScript変数でするように、Svelteはそれを直接更新します!
VEEはほとんど同じ構文を持っています.
チェックイットアウト🚀

反応する

Link

import { useState } from 'React';

const Component = () => {
  // state
  const [message, setMessage] = useState<string>('Hello');
  const updateMessage = () => setMessage('Hello World');

  return (
    <div>
      { message }
      <button onClick={updateMessage}>Update message<button>
    </div>
  )

}

Vue

Link

<script setup lang="ts">
  import { ref } from 'vue'; 
  // state
  const message:string = ref('hello');

  const updateMessage = () => {
    message.value = 'Hello World';
  }
</script>

<template>
 {{ message }}
 <button @click="updateMessage">Update message</button>
</template>

スベルト

Link

<script lang="ts">
// state
let message:string = 'hello';

const updateMessage = () => {
  message = 'Hello World';
}
<script>

<div>{ message }</div>
<button on:click="updateMessage">Update message</button>