2022/6/7

vue和react的区别

1. 核心思想不同

   • Vue的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的MVVM框架. vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。
   • React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构, React推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现

2. 组件写法不同

   • Vue的组件写法是通过template的单文件组件格式。
   • React的组件写法是JSX+inline style，也就是把HTML和CSS全部写进JavaScript中

3. Diff算法不同

   • vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性
   • vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效

4. 响应式原理不同

   • React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染
   • vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和setter，每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到了那些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法，进行渲染数据。

MVC和MVVM

MVC架构

• MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器
  • Model（模型层），主要管理的是业务模型的数据和处理数据的逻辑。
  • View（视图层）主要是接收用户的交互请求并展示数据信息给用户。
  • Controller（控制器层）主要担任的是Model和View之间的桥梁，用于控制程序的流程。Controller负责确保View可以访问到需要显示的Model对象的数据，View接收到用户的交互请求之后，会将请求转发给控制器，控制器解析请求之后，会交给对应的Model处理。

MVVM架构

• 指的是Model-View-ViewModel，我们可以看到MVVM架构和MVC架构的区别在于有一个ViewModel部分，首先我们要知道在已经有了MVC架构的时候，为什么还要衍生出MVVM架构，这是因为View中很多控件的数据类型和Model中的属性不相同，例如Model中的时间数据可能是一串数字，View想要展示成日期的格式，这就需要一种转化，这个转换如果放在View不合适，因为View中不应该出现逻辑代码，放在Model中也不合适，这回导致Model臃肿庞大，因为这种问题的存在诞生了ViewModel，这一层可以帮助View转化为相应的数据给Model或者从Model中转化成View可以显示的内容。

• vue中的MVVM

  M：模型(Model) ：data中的数据

  V：视图(View) ：模板代码

  VM：视图模型(ViewModel)：Vue实例对象

VM对象(VM) 的data(M)中所有的属性最终会出现在VM对象身上

而VM身上所有的属性和原型proto上的所有属性全都能在模版代码(V)上通过语法直接使用

声明式是什么意思

声明式与之相对应的是命令式，命令式指的是通过DOM操作一步步把网页变成想要的样子，而声明式则是只需要通过状态去形容最后的网页长什么样子即可。

组件化是什么意思

组件化指的是尽可能的将页面拆分成一个个较小的、可以复用的组件，这样让我们的代码更加方便组织和管理，并且拓展性页更强。

如何理解React的单向数据流

React的单向数据流指的是数据主要从父节点通过props传递到子节点，如果顶层某个props改变了，React会重新渲染所有的子节点，但是单向数据流并非单向绑定，React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那么各组件的状态改变就会变得难以追溯。

vue的生命周期

• 概念: 每个vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。详细来说，就是Vue实例从开始创建，初始化数据，编译模板，挂在dom->渲染，更新->渲染，卸载等一系列过程，我们称这是vue的生命周期，各个阶段有相对应的事件钩子

• vue2

  生命周期	描述
  beforeCreate创建前	刚初始化了一个空的VUE实例对象，这时它只有默认的一些生命周期和默认的事件，其他东西都尚未创建
  created创建后	组件实例已经完全创建，属性也绑定,data和methods都已经被初始化好，但真实 dom 还没有生成，$el 还不可用
  beforeMount载入前	在挂载开始之前被调用, 在此函数执行时，模板已经在内存中编译完成，但尚未挂载至页面，此时页面还是旧的, 相关的 render 函数首次被调用
  mounted载入后	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子, 表示我们的整个VUE实例已经初始化完毕，这一阶段一个VUE实例已经完全成熟，是我们实现方法、过滤器等操作的最佳阶段。此时组件已经脱离创建阶段，进入运行阶段
  beforeUpdate更新前	这一阶段产生在 mounted 中，与页面形成了一个循环的交互，但页面中显示的数据还是旧的，此时data数据是最新的，不过页面与最新的数据尚未同步。组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
  updated更新后	组件数据更新之后, 页面与data数据已经保持同步，页面显示内容都是最新的了
  activited	keep-alive 专属，组件被激活时调用
  deactivated	keep-alive 专属，组件被销毁时调用
  beforeDestory销毁前	组件销毁前调用, 执行时VUE实例已经从运行阶段进入销毁阶段，实例中的data、methods以及指令、过滤器等都还处于可用状态，还未真正执行销毁过程
  destoryed销毁后	组件已经被完全销毁，此时组件中所有的data、methods以及指令、过滤器等都已经不可用，销毁过程执行完毕

• vue3

  选项式 API	Hook inside setup
  beforeCreate	Not needed*
  created	Not needed*
  beforeMount	onBeforeMount
  mounted	onMounted
  beforeUpdate	onBeforeUpdate
  updated	onUpdated
  beforeDestroy	onBeforeUnmount
  destroyed	onUnmounted
  errorCaptured	onErrorCaptured
  renderTracked	onRenderTracked
  renderTriggered	onRenderTriggered
  activated	onActivated
  deactivated	onDeactivated