react对比vue的核心属性

圣京都2025-03-15 9:47

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(() => {}, [])