Vue -当您可以很容易地使用数据选项进行安装时，为什么要使用反应性设置呢？
Vue -当您可以很容易地使用数据选项进行安装时，为什么要使用反应性设置呢？
提问于 2022-09-09 07:20:51
我目前正在为Vue应用程序构建一个登录名。在教程(02/2021)中，我看到同事创建了一个安装方法，并将一个Vue反应性对象导入到组件中。只是为了收集表单数据！难道就不能用数据方法来完成吗？
HTML /登录组件
<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.数据库的新变体？真的有必要吗？
import {reactive} from 'vue';
export default {
name: 'Login',
setup() {
const data = reactive({
email: '',
username: ''
})
return {
data
}
}
}2.旧易变体
export default {
name: 'Login',
data() {
return {
data: {
email: '',
username: ''
},
}
},
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-09 07:33:13
data字段是Options中的一个选项，您可以在该选项中声明可以直接在模板中使用的反应性数据，或者可以使用this在其他钩子中访问的响应数据，其中该API中的所有内容都是由选项data、methods、computed组织的。组件特性是重叠的，但是在组合API中，代码是按照特征组织的，可以在多个逻辑和组件之间进行提取和重用。
在Vue 3中，options仍然受支持，但建议使用组合API，特别是在script setup中：
<script setup>
import {reactive} from 'vue';//can be auto imported in Nuxt or using auto import plugin in Vue SPA
const data = reactive({
email: '',
username: ''
})
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73658625
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号