Vue vs. React feature comparison

Vue Function	React Equivalent	Description
ref	useState / useRef	ref creates a reactive reference to a value. In React, useState is used for stateful values, and useRef for mutable values without re-renders.
reactive	useState (with objects)	reactive makes an object reactive. In React, you use useState with objects, ensuring immutability by creating new objects on updates.
onMounted	useEffect(() => { }, [])	Lifecycle hook for when a component is mounted. In React, this is achieved using useEffect with an empty dependency array.
watch	useEffect	watch tracks specific reactive variables for changes. In React, useEffect can be used to track changes by adding dependencies to the array.
computed	useMemo	computed creates derived reactive values. In React, useMemo is used for memoizing values to optimize performance.
defineProps	Props destructuring in function components	defineProps defines props in Vue's Composition API. In React, props are passed as arguments to function components and destructured inside the component.
defineEmits	Event handlers passed as props	defineEmits defines custom events in Vue. In React, event handlers are passed as props and called within child components.
defineSlots	props.children or props.render	defineSlots is used for slot content. In React, this is handled by props.children or render props pattern.
v-for	.map() method in JSX	v-for is used to iterate over items in Vue templates. In React, you use the .map() method to render lists in JSX.
:key	key attribute in JSX	:key is used to give unique keys to list items in Vue. In React, key serves the same purpose to help identify list items uniquely.
v-on	onClick, onChange, etc.	v-on is used for event binding in Vue. In React, you use event handler attributes like onClick, onChange, etc., in JSX.
v-bind	JSX attribute binding	v-bind is used for binding attributes dynamically in Vue. In React, you achieve this by passing variables directly into JSX attributes.
	{} in JSX	Vue's interpolation is equivalent to {} in JSX for inserting dynamic values.
v-if/v-else-if/v-else	Ternary operators or &&
v-show	Conditional rendering with CSS display property	v-show toggles visibility via CSS. In React, this is typically done by conditionally setting the style attribute with display: none.
v-model	useState with onChange/value	v-model is used for two-way data binding in Vue. In React, this is achieved by managing state with useState and using onChange/value handlers.
v-html	dangerouslySetInnerHTML	v-html renders raw HTML in Vue templates. In React, this is done using dangerouslySetInnerHTML, which should be used cautiously to avoid XSS attacks.