前言
由于主包在简历上写道，掌握Vue、React的全家桶。最近面试的时候也被问到Vue和React之间的区别之类的问题，当时我回答的很烂应该。虽然自己对很多知识多多少少也是会的，但是在面试的时候经常讲不出来，也讲不好。于是就来总结一下吧。
Vue 和 React 的区别
我对Vue和React都进行了学习，我觉得他们在设计上都有很大的相似之处，只是在有些语法上可能有些差异吧。 首先，Vue是一个Single File Component(单文件组件)，template、script、style都在一个文件内书写，文件的后缀是.vue。而React通常是.jsx或者.tsx为后缀的。
其次，Vue和React的开发粒度较细，都是写组件的。而组件之间的通信，都要遵守单向数据流。父组件向子组件传递props数据和一个callback函数，子组件通过callback通知父组件更改数据。然而Vue的话它是不推荐这种做法，违背了它声明式、事件驱动的设计哲学。它推荐v-on和$emit这种发布订阅的模式来实现父子通信。组件通信也都有对应的Provide、Inject机制，还有事件总线机制，大致的思路都是类似的只是最终的写法有所差异。
在生命周期方面的话，主要的几个阶段都是类似的，创建、挂载、更新、卸载。只是不同语言提供了不同的生命周期钩子来使用。
在响应式原理方面，Vue2是基于Object.defineProperty递归来劫持data所有属性添加getter来收集依赖，setter自动派发。Vue3利用Proxy和Reflect来代理对象。而React是基于状态驱动更新，要通过useState等Hooks来管理组件状态，触发组件的重新渲染。 Vue和React的核心底层都是使用了虚拟DOM技术和Diff算法来优化各自的性能，在最近我关注到Vue3.6中它推出了VaporMode想要去取代掉虚拟DOM，它可以做到靶向更新。 以上内容就是，我对Vue和React的区别的认识。
Vue2 和 Vue3 的区别
API 风格发生了改变，在Vue2中使用的是选项式API，逻辑分散在data、method等选项里面，当逻辑复杂的时候不利于阅读。而Vue3中推出了组合式API，把同一个功能的代码集中起来处理，让代码更加有序，有利于代码书写和维护。
根节点不同，在vue2里面一定要有根标签。vue3的话是可以没有根标签的，它默认把多个根标签用一个fragement虚拟标签来包裹。
生命周期钩子函数发生了改变，在Vue3中setup函数承担了beforeCreate和created两个阶段的功能。
响应式原理发生了改变，在vue2中使用Object.defineProperty()的get()和set()来做数据劫持，并且结合了发布订阅模式来实现的，Object.definedProperty()是需要遍历对象的每个属性的。而Vue3用Proxy进行代理整个对象，不用像Object.defineProperty()那样遍历每一个属性，当操作对象的属性的时候可以自动拦截。 Vue3还对编译阶段做了大量的优化，提升运行时的性能。Vue2中每次更新需要进行全量的diff，而Vue3中编译器会分析模板，标记动态节点，静态节点直接提升，运行时跳过比对。也使用了patchFlag标记节点的变更类型，减少diff范围。提出了Block Tree机制，每个组件维护一个动态节点的Block Tree，更新时只diff动态部分，极大提升diff效率。对于大量的静态内容，Vue3有着预字符串化处理，在编译阶段直接转换成为字符串或常量，运行的时候跳过重复创建和diff
在diff算法层面上，Vue2用的是双端比较，而Vue3是最长递增子序列算法来最大可能的减少diff的次数。 Vue3用TS重写了一下，类型定义更加完整，也支持泛型，编辑器的提示变的更好
函数组件和类组件的区别
类组件要通过使用ES6类的编写形式去写组件，类必须要继承React.Component如果想要访问父组件传递过来的参数，可以通过this.props的方式去访问，而组件中必须要实现render方法，在return中返回React对象。而函数组件就是要通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式，代码量也是少于类组件。
两者最明显的的区别就是编写形式，同一种功能的实现可以分别对应类组件和函数组件来编写。
在hooks出来之前，函数组件本身是无状态的，无法直接管理内部状态。如果需要状态管理，必须借助外部的机制。比如，把状态提升到最近的类组件父级，由父组件通过props传递给函数组件，这种方式是比较复杂的，本质还是需要借助类组件的力量。在有了hooks之后，函数组件拥有了管理自身状态的能力，使得状态管理更加灵活。 在函数组件中是没有生命周期的，因为这些生命周期钩子都来自于继承React.Component的。所以，用到生命周期，就只能使用类组件。但是后面有了hooks可以用hooks来模拟生命周期。
函数组件本质是一个函数，我们是需要调用函数的。而类组件是一个类，我们需要把它实例化然后调用实例对象的render方法。
Ending
以上就是我对这几个问题回答的一个总结的，我觉得要是面试的时候能够说出来，还是能够打动面试官的。欢迎路过大佬前来指导指导。
