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(() => {}, [])
相关推荐
苹果电脑的鑫鑫27 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
忧郁的蛋~36 分钟前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强40 分钟前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬44 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
一袋米扛几楼981 小时前
【Node】Node.js环境变量配置,及下载地址
javascript·网络·node.js
还是鼠鼠1 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
Moment1 小时前
前端性能指标 —— FMP
前端·javascript·面试