なぜ Vue?

エンジニアは少ないコードでシンプルに書きたいと常日頃から思っていると思います。Vue.jsはReactなどを学習してきたからこそ書き方の違いをこの記事で書きたいと思います。

繰り返し処理

list.jsx

    const items = [];

    return(
    	{items.map(item) => (
    		<div>
    			{ item }
    		</div>
    	)}  
    )

list.vue

<script>
	const items = [];
</script>

<template>
	<div v-for="item in items">
		{{ item }}
	</div>
</tempalte>

入力処理

input.jsx

import { useState } from 'react';

const [value, setValue] = useState("");

returun(
	<>
		<input
			type="text"
			onChange={(e) => setValue(e.target.value)}
			value={ value }
		/>
	</>
)

input.vue

<script setup>
import { ref } from 'vue';
const value = ref('');
</script>

<template>
	<input
		type="text"
		v-model="value"
		:value={{ value }}
	/>
</template>

コンポーネント

componet.vue

<script setup>
import { ref } from 'vue'
import A from './componentA';
import B from './componentB';
import C from './componentC';

const currentComponent = ref(A)
</script>

<template>
	<button @click="currentComponent = A">A</button>
	<button @click="currentComponent = B">B</button>
	<button @click="currentComponent = C">C</button>
	<component :is="currentComponent"/>
</template>

これを知ってからjsx/tsxの書き方には戻れないと思いました。