React与vue的生命周期对照

新学vue,对vue还不是很理解,参照React将vue的生命周期分为三个阶段。

第一阶段:组件挂载阶段


疑问:哪一个阶段被调用后,组件会被更新?

mounted,视图渲染完毕后,在这个阶段获取数据,同componentDidMount

第二阶段:组件更新阶段


第三阶段:组件卸载阶段


Vue独有的:


以上是在学vue过程中为了更好的理解,对照react的生命周期,个人觉得vue和react有非常多相似的地方,只是在学习的过程中,感觉生命周期和语法一类的,没有React直观,处理方式要绕一些。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ReactVue 是两个流行的 JavaScript 框架,它们都有自己的生命周期方法。React生命周期方法包括: 1. Mounting:组件被创建并且插入到 DOM 中。 - constructor: 组件构造函数 - getDerivedStateFromProps: 从 props 中获取派生状态 - render: 渲染组件 - componentDidMount: 组件挂载到 DOM 上 2. Updating:组件更新,可以是 props 或者 state 的改变。 - getDerivedStateFromProps: 从 props 中获取派生状态 - shouldComponentUpdate: 判断是否需要重新渲染组件 - render: 渲染组件 - componentDidUpdate: 组件更新完成 3. Unmounting:组件被从 DOM 中移除。 - componentWillUnmount: 组件移除前的清理工作 Vue生命周期方法包括: 1. Creation:创建阶段,包括实例化、数据观测、模板解析、编译等。 - beforeCreate: 实例创建前调用 - created: 实例创建后调用 - beforeMount: 模板编译/挂载前调用 2. Mounting:挂载阶段,包括模板编译、挂载、渲染等。 - mounted: 模板编译/挂载后调用 3. Updating:更新阶段,包括响应式数据更新、虚拟 DOM 重构、渲染等。 - beforeUpdate: 组件更新前调用 - updated: 组件更新后调用 4. Destruction:销毁阶段,包括实例销毁前的清理工作等。 - beforeDestroy: 实例销毁前调用 - destroyed: 实例销毁后调用 总的来说,ReactVue生命周期方法有一些相似之处,但是也存在一些差异。React 有一个 shouldComponentUpdate 方法来判断是否需要重新渲染组件,Vue 则没有这个方法,但是提供了一个 watch 选项来观察数据的变化。另外,React生命周期方法是在组件的 class 中定义的,而 Vue生命周期方法则是在 Vue 实例中定义的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值