快捷導(dǎo)航

Vue和React受控組件的區(qū)別小結(jié)

更新時(shí)間：2025年09月01日 09:38:55 作者：程序員大衛(wèi)

本文主要介紹了Vue和React受控組件的區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

背景

有時(shí)候我們希望一個(gè)復(fù)選框 (checkbox) 始終保持勾選狀態(tài)，即使用戶點(diǎn)擊也不會(huì)被取消。

在真實(shí)業(yè)務(wù)中，當(dāng)然可以通過(guò) :disabled 屬性直接禁用實(shí)現(xiàn)，但這并不是本文要討論的重點(diǎn)。

舉個(gè)類比：假設(shè) Vue 并沒(méi)有提供 v-model.number 這樣的語(yǔ)法糖，而我們又想實(shí)現(xiàn)一個(gè)只能輸入數(shù)字的 input，那實(shí)現(xiàn)方式就會(huì)相對(duì)繁瑣。

所以本文用 checkbox 作為例子，來(lái)對(duì)比 React 和 Vue 在受控組件實(shí)現(xiàn)上的不同思路。

React 的實(shí)現(xiàn)

在 React 中，受控組件的思路非常直接：通過(guò) state 控制值，任何用戶交互最終都會(huì)回到 state 來(lái)決定組件顯示。

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 管理；
無(wú)論用戶如何點(diǎn)擊，onChange 都會(huì)把 checked 重置為 true。

Vue3 的實(shí)現(xiàn)

在 Vue3 中，要讓組件保持“受控”，可以通過(guò) v-model 配合事件回調(diào)來(lái)實(shí)現(xiàn)。下面展示兩種不同寫(xiě)法。

寫(xiě)法一：直接修改事件參數(shù)

<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>

寫(xiě)法二：通過(guò)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>

這一寫(xiě)法借助 ref，直接操作 DOM 元素來(lái)重置勾選狀態(tài)。

Vue2 的實(shí)現(xiàn)

在 Vue2 中，由于沒(méi)有 defineModel 這樣的語(yǔ)法糖，我們通常通過(guò) data 和 methods 來(lái)控制。

寫(xiě)法一：事件里修改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>

寫(xiě)法二：使用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>

這一寫(xiě)法與 Vue3 的“寫(xiě)法二”類似，也是通過(guò) ref 強(qiáng)行把 DOM 狀態(tài)改回去。