Vue의 간결한 API를 위한 양방향 데이터 바인딩. 대화상자 예시.

양방향 데이터 바인딩은 논란의 여지가 있습니다. 데이터 흐름을 부모에서 자식으로만 유지하는 것은 복잡한 애플리케이션에서 버그를 수정해야 할 때가 왔을 때 유익한 것입니다.
React는 항상 이것에 대해 매우 엄격했으며, 이는 예를 들어 인기 있는 Material UI 라이브러리에서 매우 자주 보이는 패턴으로 이어집니다.

대화 상자 구성 요소를 사용하여 구성 요소 라이브러리를 생성하려는 상황을 상상해 보십시오.

단순화를 위해 예제에는 대화 상자를 닫는 버튼만 있습니다.

부모 구성 요소에는 대화 상자의 열린 상태를 토글하는 추가 버튼이 있으며 대화 상자 구성 요소는 "자신을 닫을"수 있습니다.

이것은 일반적으로 이 구성 요소가 React에서 사용되는 방식입니다.

import React, { useState } from 'react'
import EasyDialog from './components/EasyDialog'

function App() {
  const [open, setOpen] = useState(true)
  return (
    <div>
      <button
        onClick={() => {
          setOpen(!open)
        }}
      >
        Toggle the dialog
      </button>
      <EasyDialog
        open={open}
        onClose={() => {
          setOpen(false)
        }}
      />
    </div>
  )
}

export default App

그리고 이것은 구성 요소의 코드입니다.

import React from 'react'

function EasyDialog({ open, onClose }) {
  return (
    open && (
      <div>
        <button onClick={onClose}>Close me</button>
      </div>
    )
  )
}

export default EasyDialog

onClose 구성 요소에서 대화 상자로 전달되는 소품인 App 를 호출하도록 대화 상자에 지시해야 하는 것이 잘못되었다고 생각합니까?

솔직히 말해서 이 상용구는 양방향 데이터 바인딩보다 더 나쁩니다. 여기서 자식은 사실상 부모의 메서드를 실행하고 있습니다!

Vue에서는 사용자 지정 v-모델이라고도 하는 사용자 지정 양방향 데이터 바인딩을 만들 수 있으므로 이 문제가 존재하지 않습니다.

이것은 동등한 앱이 Vue에서 보이는 방식입니다.

<script setup>
import { ref } from 'vue'
import EasyDialog from './components/EasyDialog.vue'

const open = ref(true)
</script>

<template>
  <div>
    <button @click="open = !open">Toggle the dialog</button>
    <EasyDialog v-model="open" />
  </div>
</template>

이 API가 훨씬 더 좋지 않습니까? 자식 구성 요소에 함수를 전달할 필요가 없습니다. 다음을 내보내는 것은 자식입니다.

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <div v-if="modelValue">
    <button @click="$emit('update:modelValue', false)">Close me</button>
  </div>
</template>

훨씬 더 간결하게 ...
Vue는 그것을 가능하게 하고, Svelte는 그것을 가능하게 합니다. React는 아마도 그러한 인체공학을 도입하지 않을 것입니다.

React 팀은 그렇게 해야 할 이유가 있고 대부분의 React 개발자는 이 접근 방식에 편안함을 느끼므로 Vue 개발자로서 저는 확실히 이 결정에 의문을 제기하지 않고 행복한 사람이 될 것입니다 :D