React, Vue 및 Svelte: 구조 분해 소품 비교

소품 파괴...

반응하다

// Parent Component
<ChildComponent {...user} />
// or
<ChildComponent user={user} />

const Component = ({id, name, lastname}) => {
  return <div id={id}>{name}{lastname}</div>
}

뷰

const props = defineProps({
  user: Object
})
let { id, name, lastname } = props.user;
<template>
<div>{{ id }} {{ name }}</div>
</template>

날씬한

// Parent Component
<ChildComponent {...user} />

// Child Component
export let name;
export let lastname;
export let id;

<div>{name} {lastname} {id}</div>