react对比vue的核心属性

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(() => {}, [])
相关推荐
IT、木易2 分钟前
大白话阐述react和vue高阶组件的概念、优势及应用场景,以及区别,给出简单高阶组件的实现代码
前端·vue.js·react.js
HaanLen3 分钟前
React19源码系列之FiberRoot节点和Fiber节点
前端·javascript·react.js
冴羽14 分钟前
SvelteKit 最新中文文档教程(3)—— 数据加载
前端·javascript·svelte
百万蹄蹄向前冲30 分钟前
组建百万前端梦之队-计算机大学生竞赛发展蓝图
前端·vue.js·掘金社区
云隙阳光i44 分钟前
实现手机手势签字功能
前端·javascript·vue.js
imkaifan1 小时前
vue2升级Vue3--native、对inheritAttrs作用做以解释、声明的prop属性和未声明prop的属性
前端·vue.js·native修饰符·inheritattrs作用·声明的prop属性·未声明prop的属性
小程序设计1 小时前
【2025】基于springboot+vue的宠物领养管理系统(源码、万字文档、图文修改、调试答疑)
vue.js·spring boot·宠物
小程序设计1 小时前
【2025】基于springboot+vue的体育场馆预约管理系统(源码、万字文档、图文修改、调试答疑)
vue.js·spring boot·后端
柠檬树^-^2 小时前
app.config.globalProperties
前端·javascript·vue.js
太阳花ˉ2 小时前
react(一):特点-基本使用-JSX语法
前端·react.js