(首发完结)Vue3+Vite+Vant-UI 开发双端招聘APP

download：https://www.sisuoit.com/4243.html

1、呼应体系的变化

由本来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。
Proxy的优势：消除了以前存在的正告，使速度加倍，并节省了一半的内存开销。

Proxy的特点及办法

2、虚拟DOM重写（Virtual DOM Rewrite）

虚拟 DOM 从头开始重写，咱们能够等待更多的编译时提示来削减运行时开销。重写将包含更有用的代码来创立虚拟节点。

虚拟DOM重写.png

3、组件烘托的优化（优化插槽生成）

Vue2傍边在父组件烘托一起，子组件也会烘托。 Vue3就能够独自烘托父组件、子组件。

优化插槽生成.png

4、静态树提高（Static Tree Hoisting）

运用静态树提高，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提高，然后降低了烘托成本。它将能够越过未整个树结构打补丁的进程。

静态树提高（.png

5、静态特点提高（Static Props Hoisting）

此外，咱们能够等待静态特点提高，其中 Vue 3 将越过不会改变节点的打补丁进程。

静态特点提高.png

总体来说：1. 更快 2. 更小 3. 更简单保护 4. 更加友爱 5. 更简单运用

vdom

1. 功能瓶颈

新vdom生成：
当数据更新时，尽管vue能够定位到最小更新粒度为组件等级，但在组件等级内，仍是需要从头遍历模板生成新的vdom，更新粒度不行小。

diff算法：diff的工作量和组件模板巨细成正相关。即便模板内只有少量的动态节点，也需要遍历整个组件去执行diff。

总结：vdom的更新粒度不行灵敏，导致生成新的vnode和新旧vnode diff进程中，做了许多无用功，导致浪费功能.

2. 原因

vdom是从react而来的，jsx和手写的render function是完全动态的，过度的灵敏性导致无法收集优化的信息，即你无法解读js的代码，来区分静态节点和动态节点。

如下图，很难识别出：只有div下的第二个p是动态节点。

image

3. 解决计划

react时间分片

在动态节点和数据的量都很大时，那么在数据更新时，js线程就会用很长的时间来执行vdom的相关核算，如果超过了16ms，造成交互或动画等等卡顿现象。而时间分片便是把vdom的很多核算分成多个小使命，保证每个小使命在16ms内执行完，然后不会阻塞用户交互，防止卡顿现象。

即react承认vdom的这些缺陷，然后它从其他的层面来弥补缺陷带来的问题。

vue缩小更新粒度

最大化运用的模板信息，把更新的粒度从组件缩小到代码块。

即从组件模板中提取出动态节点、动态代码块，做diff时，只需要比较这些动态区域，而忽略掉静态节点，然后提高功能。

imageimageimage

image
再比如一个节点仅仅class特点为动态的，那么只需要diff这一个特点即可。进一步提高了功能。

总结：vdom的更新功能将与动态内容的数量相关，而不是模板整体巨细。

function-based API

image

优势1：更好的支持TS类型推导

优势2：Tree-shaking友爱

常用的API value、computed、watch等都是从vue中运用import引进来的，所以支持tree-shaking。即如果没有运用这些api，那么这些相应的代码就不会被打包，缩小了文件巨细。

优势3：代码更简单被紧缩

对象特点一般是不会被紧缩的，而变量名是能够被紧缩的

优势4：逻辑复用

逻辑复用有许多种计划，都有一些缺陷：

1. mixins

• 命名空间抵触（多个mixins，不能保证变量名不会抵触）
• 数据来历不清晰（多个mixins时，运用的变量就不易分辨它的来历）

2. 高阶组件

• props命名空间抵触
• props数据来历不清晰
• 额定的组件实例功能耗费

3. 效果域插槽

• 额定的组件实例功能耗费

而在vue3中逻辑复用会有不同的方式：

image
能够发现和 react hook逻辑封装方式很像，便是在组件内定义呼应式的变量，并封装变量更改的逻辑，在最终把变量露出出来，供其他组件运用。