本文已参与[新人创作礼]活动，一起开启掘金创作之路。
Vue
一、Vue中响应式
1、Vue2.0通过遍历data中所有对象，通过Object.defineProperty添加getter/setter属性实现。此方法不具备监听数组的能力，并且无法检测到对象属性的添加和删除。
2、Vue3.0基于Proxy,自定义set和get实现，解决了2.0不能监听数组以及对象属性的问题，不需要要遍历所有对象，组件实例初始化的速度提高100%，节省vue2.0一半的内存开销
二、Vue模板转换成视图的过程。
Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统，在状态改变时，Vue能够通过优化后的diff算法计算出重新渲染组件的最小代价并应到DOM操作上
三、Vue中的diff算法。
Vue中运用了虚拟DOM来减少DOM操作，但原生的DIFF算法依旧不够效率，因为每个组件在创建时只会new一个wacher来监听，且diff算法本身时间复杂度过高，于是在Vue中对diff算法进行了优化，采用同层比较，深度优先，头头-尾尾-头尾-尾头对比，以及运用key的策略。
四、单向数据流的Vue
Vue中只运行父级向子级传值，子级向父级传值时需通过事件向父级提交，在父级中改变。
另外可通过provide/inject跨层级传值
五、Vuex
当我们遇到多个组件共享数据或方法时，采用Vuex
六、Vue采用MVVM模式
分离了View与model,使得开发人员分工明确，实现了双向数据绑定
七、Vue中的nextTick
当我们获取DOM更新的节点后，时常不能预期的获取结果，这是因为Vue中的DOM更新是异步的。此时该运用同样是异步队列中进行的nextTick，nextTick会优先在微任务队列中执行，当遇到不支持的情况时（不支持ES6的浏览器），会进行降级处理运用setTimeout代替。
Vue中的性能优化
- v-for不与v-if同层使用，因为v-for的优先级大于v-if
- 使用 keep-alive缓存组件,避免组件反复的创建与销毁
- 设置key,提高对比新旧dom树中节点时的效率
- 使用v-if时默认不显示
- 切换频率高时用，用v-show代替v-if ；切换频率低时，用v-if代替v-show
- 无需自动响应的数据不放入data中。因为在data中的数据都会被监听，浪费内存。
使用Vue的场景
1.希望用模板搭建应用。因为Vue.js 使用了基于 HTML 的模板语法
2.希望搭建快速的应用。Vue中是双向数据绑定的，无需手动改值。
3.希望应用运行速度快或是尽快能的小。渲染速度高于React,大小小于React
React
一.React中响应式原理
React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。
二.React采用JSX
React中采用JSX生成React元素，并将其传入 ReactDOM.render() 方法
-
使用JSX可以提高组件的可读性
-
保证了组件中的标签和所有业务逻辑的相互分离
三.React中的diff算法
React中同样对diff算法进行了优化，同样忽略了跨层级的比较，并判断不同类型组件间，不进行比较直接取代；相同类型组件比较可通过ShouldComponent()来判断减少不必要的操作，在多层级多个节点比较中，采取唯一标志key来判断，并在移动节点前判断新旧结点中的下标，避免不必要的操作
四.React中的HOOK
在React中函数组件无法运用state以及其他在类组件能使用的特性，HOOK的出现使得函数组件也能运用这些特性。
五.React中的redux
当组件状态需要多地共享，与服务器大量交互时需应用redux.
能够通过store在任意组件中发放数据，共享方法。
六.单向数据流的React
同样只允许父级向子级传值，子级通过调用父级传过来的方法，将值传到父级，在父级中更改值。
除这种传值方式外，类组件可通过context传值，函数组件中可以通过usecontext
七.采用了MVC模式
将模型和视图之间实现代码分离,并且减少了代码的重复性
React中的性能优化
- 定义ShouldComponent()中的条件判断避免重复渲染，因为这个函数本身默认返回true。
- 定义非数组下标的key值，因数组下标容易导致key值重复，且会在数组变化时更改。key值将在新旧dom中节点比较时运用。
- 能使用时，尽量使用无状态组件。因为无状态组件不需要声明类，不需要显示声明this关键字。
- 将函数作用域的绑定放在初始化construct（）阶段，避免因渲染时的重复绑定
使用React的场景
- 构建大型项目时。因为React有更强的测试性，以及可维护性
- 同时构建Web端和App时。因为React Native与React.js大体相同。
- 创建一个更受欢迎的项目。React较于Vue在国际上使用更广泛。
