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 受控组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，这篇文章给大家介绍了vue项目中使用AvueJs的相关知识，感兴趣的朋友跟随小编一起看看吧2022-10-10
在 Vue 中,v-model 是一个常用的指令,用于实现表单元素和组件之间的双向绑定,当我们使用原生的表单元素时,直接使用 v-model 是很方便的,本文给大家介绍了Vue自定义组件实现 v-model 的几种方式,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要介绍了多个vue项目复用一个node_modules的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了利用Nuxt.js做Vuex数据持久化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了Vue实现可拖拽组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vee-validator是一种基于vue模板的轻量级校验框架。本文主要讨论的是vee-validator校验方案，感兴趣的朋友跟随小编一起看看吧2019-11-11
在本篇文章中，我们给大家详细讲述了vue中如何配置less的详细代码和步骤，有需要的朋友跟着学习下。2018-09-09
本文主要介绍了Vue+Node.js+WebSocket实现即时通讯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论