Javascript Vue 当您可以使用数据选项轻松进行设置时，为什么还要使用响应式设置

我目前正在建立一个Vue应用程序的登录.在教程(2021年2月)中，我看到这位同事创建了一个Setup方法，并将Vuereact 对象导入到组件中.只是为了收集表单数据！这就不能只用数据方法来完成吗？

HTML / Login Component个

<template>
  <form action="/action_page.php" method="post">
    <div class="container">
      <input v-model="data.username" type="text" placeholder="Enter Username" name="username" required />
      <input v-model="data.password" type="password" placeholder="Enter Password" name="password" required />
      <button type="submit">Login</button>
      {{ data }}
    </div>

  </form>
</template>

1. New variant of databinding? Is that really necessary?个

import {reactive} from 'vue';

export default {
    name: 'Login',
    setup() {
        const data = reactive({
            email: '',
            username: ''
        })

        return {
            data
        }
    }
}

2. Old and easy variant个

export default {
    name: 'Login',
    data() {
        return {
            data: {
                email: '',
                username: ''
            },
            
        }
    },
}