Vue和React受控组件的区别小结
更新时间：2025年09月01日 09:38:55 作者：程序员大卫
本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
背景
有时候我们希望一个复选框 (checkbox) 始终保持勾选状态，即使用户点击也不会被取消。
在真实业务中，当然可以通过 :disabled 属性直接禁用实现，但这并不是本文要讨论的重点。
举个类比：假设 Vue 并没有提供 v-model.number 这样的语法糖，而我们又想实现一个只能输入数字的 input，那实现方式就会相对繁琐。
所以本文用 checkbox 作为例子，来对比 React 和 Vue 在受控组件实现上的不同思路。
React 的实现
在 React 中，受控组件的思路非常直接：通过 state 控制值，任何用户交互最终都会回到 state 来决定组件显示。
import { useState } from "react";
function App() {
const [checked, setChecked] = useState(true);
const onChange = () => {
setChecked(true);
};
return <input checked={checked} type="checkbox" onChange={onChange} />;
}
export default App;
这里的核心逻辑是：
checked始终受state管理；- 无论用户如何点击，
onChange都会把checked重置为true。
Vue3 的实现
在 Vue3 中，要让组件保持“受控”，可以通过 v-model 配合事件回调来实现。 下面展示两种不同写法。
写法一：直接修改事件参数
<script lang="ts" setup>
import { useTemplateRef } from "vue";
const checked = defineModel({
default: true,
});
const onChange = (e: Event) => {
(e.target as HTMLInputElement).checked = true;
checked.value = true;
};
</script>
<template>
<input type="checkbox" v-model="checked" @change="onChange" />
</template>
写法二：通过ref引用 DOM
<script lang="ts" setup>
import { useTemplateRef } from "vue";
const checked = defineModel({
default: true,
});
const inputRef = useTemplateRef("input");
const onChange = () => {
if (inputRef.value) {
inputRef.value.checked = true;
}
checked.value = true;
};
</script>
<template>
<input type="checkbox" ref="input" v-model="checked" @change="onChange" />
</template>
这一写法借助 ref，直接操作 DOM 元素来重置勾选状态。
Vue2 的实现
在 Vue2 中，由于没有 defineModel 这样的语法糖，我们通常通过 data 和 methods 来控制。
写法一：事件里修改event.target
<script>
export default {
data() {
return {
checked: true,
};
},
methods: {
onChange(e) {
e.target.checked = true;
this.checked = true;
},
},
};
</script>
<template>
<input type="checkbox" v-model="checked" @change="onChange" />
</template>
写法二：使用ref引用
<script>
export default {
data() {
return {
checked: true,
};
},
methods: {
onChange(e) {
this.$refs.input.checked = true;
this.checked = true;
},
},
};
</script>
<template>
<input type="checkbox" ref="input" v-model="checked" @change="onChange" />
</template>
这一写法与 Vue3 的“写法二”类似，也是通过 ref 强行把 DOM 状态改回去。
总结
- React：天然是受控模式，所有输入值都由
state控制，逻辑简单直接。 - Vue3：可以通过
v-model配合事件控制，既能改event.target，也能通过ref操作 DOM。 - Vue2：思路与 Vue3 类似，只是语法更原始，需要手动处理
data和ref。
通过这个例子可以看到，React 在受控组件实现上更自然，而 Vue 则需要多写几行代码，但也能实现同样的效果。
到此这篇关于Vue和React受控组件的区别小结的文章就介绍到这了,更多相关Vue和 React 受控组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决vue项目Error:Cannot find module‘xxx’类报错问题
当npm运行报错Error:Cannot find module 'xxx'时,通常是因为node_modules文件或依赖未正确安装,解决步骤包括删除node_modules和package-lock.json文件,重新运行npm install,并根据需要安装额外插件,若网络问题导致安装失败2024-10-10
这篇文章主要介绍了vue表单验证之禁止input输入框输入空格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
在现代Web开发中,浏览器兼容性是一个重要的问题,尽管大多数用户已经转向了现代浏览器,但仍有一部分用户可能仍在使用老旧的浏览器版本,本文将详细介绍如何在Vue项目中实现低版本浏览器升级提示,并通过多个代码示例来展示不同的应用场景和技术点,需要的朋友可以参考下2024-10-10
Vue项目中下载返回的文件流操作包括：使用Axios请求文件流数据、设置响应类型为'blob'、创建下载链接并触发下载,关键步骤是使用Blob对象和URL.createObjectURL生成下载链接2025-12-12
本篇文章主要介绍了Vue单文件组件基础模板小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
下面小编就为大家分享一篇浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue中axios的post请求,415错误的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue实现循环滚动列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue3的基本使用方法,结合实例形式详细分析了vue3功能、组件、生命周期、TypeScript结合运用等相关概念与使用方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论