Vue 常用的核心属性可以分为以下几类，并与 React 实现方式对比：
1. 核心属性
复制代码
// Vue 选项式 API 常用属性
export default {
props: {}, // 类似 React 的 props
data() { return {} }, // 类似 React 的 useState
computed: {}, // 类似 React 的 useMemo
methods: {}, // 类似 React 的函数声明
watch: {}, // 类似 React 的 useEffect + 依赖项
// 生命周期钩子
created() {}, // 类似 React 的 useEffect(() => {}, [])
mounted() {}, // 类似 React 的 useEffect(() => {}, [])
}
2. 生命周期对比
复制代码
// Vue 生命周期 | React 等效实现
//----------------------------------------------
beforeCreate() {} => 无直接等效（可在自定义 Hook 中实现）
created() {} => useEffect(() => {}, [])
beforeMount() {} => useLayoutEffect(() => {}, [])
mounted() {} => useEffect(() => {}, [])
beforeUpdate() {} => useLayoutEffect(() => {})
updated() {} => useEffect(() => {})
beforeUnmount() {} => useEffect(() => () => {})
unmounted() {} => useEffect(() => () => {})
3. 模板指令对应关系
复制代码
<!-- Vue 模板指令 --> | <!-- React 实现 -->
<组件 v-model="data"/> => <组件 value={data} onChange={handleChange}>
<div v-if="show"> => {show && <div>}
<div v-for="item in list"> => {list.map(item => <div key={id}>)}
<div :class="{active}"> => <div className={`${active ? 'active' : ''}`}>
<div @click="handler"> => <div onClick={handler}>
4. 组合式 API 对比
复制代码
// Vue 3 组合式 API | React Hooks
//----------------------------------------------
const num = ref(0) => const [num, setNum] = useState(0)
const double = computed()=> const double = useMemo()
watch(num, () => {}) => useEffect(() => {}, [num])
onMounted(() => {}) => useEffect(() => {}, [])