Vue与React区别_有这一篇就够了

React生命周期:

分为三个阶段:实例化(Mounting)、存在期(Updating)和销毁期(Unmounting)。

实例化(Mounting)

这个阶段是组件第一次渲染到DOM中的过程。

  • constructor(props)
    • 作用:构造函数,用于初始化组件的状态(state)和绑定事件处理器。
  • static getDerivedStateFromProps(props, state)
    • 作用:在每次渲染之前调用,用于根据props更新state。返回null表示不需要更新。
  • render()
    • 作用:返回组件的虚拟DOM结构,供React进行DOM的渲染。
  • componentDidMount()
    • 作用:组件挂载到DOM后调用,通常用于发起网络请求、订阅事件或执行其他只在DOM可用时才需要的操作。

存在期(Updating)

这个阶段是组件在运行和交互过程中的状态更新。

  • static getDerivedStateFromProps(props, state)
    • 作用:同样在每次渲染之前调用,用于根据props更新state。
  • shouldComponentUpdate(nextProps, nextState)
    • 作用:用于控制组件是否需要根据新的props或state重新渲染。返回true表示需要渲染,返回false表示不需要。
  • render()
    • 作用:同实例化阶段,返回组件的虚拟DOM结构。
  • getSnapshotBeforeUpdate(prevProps, prevState)
    • 作用:在DOM即将更新之前调用,用于在可能发生的DOM变更之前从DOM捕获一些信息(例如滚动位置)。
  • componentDidUpdate(prevProps, prevState, snapshot)
    • 作用:组件的DOM更新后调用,通常用于在DOM更新后执行操作,如操作DOM、网络请求等。

销毁期(Unmounting)

这个阶段是组件从DOM中卸载的过程。

  • componentWillUnmount()
    • 作用:组件卸载前调用,用于执行清理操作,如取消网络请求、移除监听事件、清理DOM元素等。

在React 16.3及以后的版本中废除的生命周期方法:

componentWillMountcomponentWillReceiveProps、componentWillUpdate

类组件 和 函数组件 区别:

1. **语法**:

- 类组件使用 ES6 中的 class 语法来定义组件,继承自 React.Component 或其子类。

- 函数组件是一个简单的 JavaScript 函数,接收 props 作为参数并返回 React 元素。

2. **状态管理**:

- 类组件可以拥有状态(state),通过 this.state 和 this.setState() 进行管理。状态的更新会触发组件的重新渲染。

- 函数组件之前是无状态的,但是在 React 16.8 版本之后引入了 Hooks,使得函数组件也可以拥有状态,并且使用 useState、useEffect 等 Hooks 来管理状态和副作用。

3. **生命周期**:

- 类组件拥有生命周期方法,如 componentDidMount、componentDidUpdate、componentWillUnmount 等,可以在组件的不同阶段执行特定的操作。

- 函数组件也可以使用 useEffect Hook 模拟生命周期,实现在组件挂载、更新和卸载时执行相应的操作。

4. **性能**:

- 函数组件通常比类组件具有更好的性能,因为函数组件没有实例化过程,没有额外的性能开销。

- 类组件在实例化过程中需要创建实例和绑定方法,相对而言性能略低于函数组件。

5. **代码复用**:

- 由于函数组件支持 Hooks,可以更方便地实现逻辑复用,将逻辑提取为自定义 Hook,并在多个组件中共享使用。

- 类组件可以通过继承和组合的方式实现代码复用,但相对而言比较繁琐。

总的来说,随着 React Hooks 的引入,函数组件在开发中越来越受欢迎,可以更简洁、更灵活地编写组件,并且在性能上也有一定的优势。但对于一些需要管理复杂状态和生命周期的组件,仍然可以选择类组件。

Vue生命周期:

Vue 2的生命周期:

初始化阶段:

1. beforeCreate():在实例初始化之后,数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用。

2. created():在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)、属性和方法的运算,watch/event 事件回调;然而,挂载阶段还没开始,$el 属性目前不可见。

DOM挂载阶段:

1. beforeMount():在挂载开始之前被调用,相关的 render 函数首次被调用。

2. mounted():el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

数据更新阶段:

1. beforeUpdate():数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

2. updated():由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作,然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

组件销毁阶段:

1. beforeDestroy():实例销毁之前调用,在这一步,实例仍然完全可用。

2. destroyed():Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

keep-alive的生命周期:

1. activated():keep-alive 组件激活时调用。

2. deactivated():keep-alive 组件停用时调用。

3. errorCaptured():当捕获一个来自子孙组件的错误时被调用,此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继续向上传播。

Vue 3的生命周期:

  1. setup():这是 Vue 3 引入的一个新的生命周期钩子,它在开始创建组件之前执行,即在 beforeCreate 和 created 钩子之前。主要用于设置响应式状态、执行副作用以及返回渲染函数或渲染对象。
  2. onBeforeMount():在组件挂载到节点上之前执行的函数。此时,组件的虚拟 DOM 已经创建,但尚未挂载到真实 DOM 上。
  3. onMounted():组件挂载完成后执行的函数。此时,组件已经挂载到真实 DOM 上,可以访问到 DOM 元素。
  4. onBeforeUpdate():组件更新之前执行的函数。在这个阶段,组件的虚拟 DOM 即将更新,但尚未应用到真实 DOM 上。
  5. onUpdated():组件更新完成之后执行的函数。此时,组件的虚拟 DOM 已经更新并应用到真实 DOM 上。
  6. onBeforeUnmount():组件卸载之前执行的函数。在这个阶段,组件即将被销毁,但尚未开始销毁过程。
  7. onUnmounted():组件卸载完成后执行的函数。此时,组件已经被完全销毁,无法再访问其任何属性和方法。
keep-alive的生命周期:
  1. onActivated():当组件被激活时执行。
  2. onDeactivated():当组件失活时执行,例如从 A 组件切换到 B 组件时,A 组件会执行这个钩子。

关于vue父子组件生命周期执行顺序:

 常见的问题:

1、父组件的created函数中无法通过 $refs 操作子组件

是因为$refs只在组件渲染完成后才填充,并且它是非响应式的,所以只有在子组件的mounted生命周期函数之后即子组件的dom元素渲染完成后,父组件才可以通过 $refs 直接操作子元素。(子组件加上 ref ,父组件使用 $refs ,在父组件的created函数中无法操作子组件。)

2、父组件在created函数中发送ajax请求,子组件中无法获取到数据。

是因为父组件的created函数中调用了某个子组件需要的数据接口,而这个接口请求是属于异步操作,此时会把异步操作放到消息队列中,等到后面的父子生命周期函数等一系列同步任务执行完成后,才会执行异步任务从而读取消息队列的任务执行回调函数(这是JS的单线程特点)。在执行父组件mounted函数中接口才会返回数据,父组件中的变量才能拿到该数据,但是子组件中的 created 、 mounted 这样只会执行一次的生命周期钩子已经执行了,所以子组件的前4个生命周期是无法拿到父组件调接口拿来的数据的。

Vue传值时机:

1、页面路由跳转传值生命周期
A页面——B页面
一般在A页面的beforeDestroy里面传值;在B页面created里面接收

2、父子组件传递异步数据
在父组件的mounted里面请求数据——>传递给子组件

子组件刚开始会接收到空值,可能会报错;我们需要在调用子组件的时候在上面加个判断;当异步数据执行完成后在进行渲染。

React与Vue的区别

相同点:

 1. 都有组件化开发和 虚拟DOM

​ 2. 都支持 props 进行父子组件间数据通信

​ 3. 都支持数据驱动视图, 不直接操作真实DOM, 更新状态数据界面就自动更新

​ 4. 都支持服务器端渲染

不同点:

 1. 组件写法不一样, React 推荐的做法是JSX , 也就是把HTML 和CSS全都写进 JavaScript 了,即'all in js'; Vue 推荐的做法是 webpack+vue-loader 的单文件组件格式,即html,css,js 写在同一个文件

​ 2. state 对象在 react 应用中不可变的,需要使用setState 方法更新状态。在 vue 中,state 对象不是必须的,数据由data 属性在vue 对象中管理

​ 3. 虚拟DOM 不一样。

vue 会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

React 每当应用的状态被改变时, 全部组件都会重新渲染。

​ 4. React 严格上只针对 MVC模式的 view 层,Vue 则是MVVM模式。

React 是单向数据流==>没有 vm 角色可以把 v 和 m 相互之间转换,它只是可以把数据转为视图。 Vue    是双向数据流==>它可以实现数据的双向绑定。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

袁广飞

感谢支持一位不知名的前端开发

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值