Vue vs React (大圣直播-2021-01-28)

Vue 3 升级

 

options =》composition

React16.8 升级

class =》 hooks

 

Vue2现在的问题 :

1.代码多了不好维护,写代码需要反复横跳(数据在data()方法在methods)

2.Mixins命名冲突

3.一旦用了Mixins就this的属性就不好确定(黑盒)这也是不能很好支持Ts的原因

 

Vue3缺点:

1.没有了option难看

 

Vue3优点:

1.利于tree-shaking 没有用到computed,代码build的时候就会删掉vue3里的computed的代码

2.方便组合、逻辑都是函数,组合优于继承(组件可以任意拆分)

3.数据流清晰

渐进式更新:

<script setup>

可以不用return 和 创建class

 

vue vs react

Vue:响应式 + vdom   (响应式:数据变了通知组件  vdom: 数据变了不知道,需要计算diff)

组件之间通过响应式,组件内部,通过vdom计算diff

问题:响应式对象太多导致卡顿,引入vdom

react :vdom

问题:不管什么情况都需要diff时间超过16.6毫秒(60hz下一帧的时间 1/60)

 

React 用jsx

劣势:不太好优化

优点:纯js语法 开放度比较高

 

Vue template

劣势不够动态,需要很多语法

优点:可限制,可优化(静态节点直接跳过diff,静态的属性也可以直接跳过diff),由于可以遍历所以,可以标记。按需更新

 

新框架 svelte 没有vdom

vdom意义:由js的object来描述你的dom节点,可以保存在数据库里,跨端

 

Vue 1.x

只有watch

vue2 引用的事snabbdom的代码。双端预判

1234

1534

react直接计算diff

Vue 双端预判 减少循环的次数(web领域大部分数列表,插入,删除,倒序)

react fiber 时间切片

 

1.任务可以切开,利用空闲时间计算

2.diff可以中断

树结构、变成列表 需要配合window.requestIdleCallback()

 

Vue3

vue 2只监听到一个节点是不是静态的

vue3可以监听到一个组件静态的,节点的某个属性

Vue3的block tree

编译层面的优化 来源 prepack.io

tree sharking  算法优化:双端优化、

性能优化的手段:编译时的优化

the-super-tiny-compller  (小的compile库)

Vue3编译逻辑