5个常问的 Vue3 优势点

水深无声 2023-01-17 15:00 108阅读 0赞

**点击关注下方卡片关注我????????**

回复“Vue3”查阅 Vue3精选文章

> **来自：CSDN，作者：大唐荣华**
> 
> **链接：https://blog.csdn.net/weixin\_40599109/article/details/110938941**

![14ce0e78cbfc01352123252e4effd92a.png][]

### 1、Vue 3.0 性能提升主要是通过哪几方面体现的？ ###

#### 1.响应式系统提升 ####

vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。

vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。

#### 优势： ####

*  可以监听动态新增的属性；
 *  可以监听删除的属性 ；
 *  可以监听数组的索引和 length 属性；

#### 2. 编译优化 ####

优化编译和重写虚拟dom，让首次渲染和更新dom性能有更大的提升 vue2 通过标记静态根节点,优化 diff 算法 vue3 标记和提升所有静态根节点,diff 的时候只比较动态节点内容

Fragments, 模板里面不用创建唯一根节点,可以直接放同级标签和文本内容

#### 静态提升 ####

patch flag, 跳过静态节点,直接对比动态节点,缓存事件处理函数

#### 3. 源码体积的优化 ####

vue3移除了一些不常用的api，例如：inline-template、filter等 使用tree-shaking

2. Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

#### Options Api ####

包含一个描述组件选项（data、methods、props等）的对象 options；

API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 ；

使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；

#### composition Api ####

vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。

解决options api在大型项目中，options api不好拆分和重用的问题。

3. Proxy 相对于 Object.defineProperty

有哪些优点？

proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。

*  可以\* 监听数组变化
 *  可以劫持整个对象
 *  操作时不是对原对象操作,是 new Proxy 返回的一个新对象
 *  可以劫持的操作有 13 种

4. Vue 3.0 在编译方面有哪些优化？

vue.js 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容；

#### Fragments（升级vetur插件): ####

template中不需要唯一根节点，可以直接放文本或者同级标签

静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。

patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。

缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数 tree shaking 通过摇树优化核心库体积,减少不必要的代码量

5.  Vue.js 3.0 响应式系统的实现原理？

#### 1. reactive ####

设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。创建拦截器handerler，设置get/set/deleteproperty。

#### get ####

*  收集依赖（track）；
 *  如果当前 key 的值是对象，则为当前 key 的对
 *  象创建拦截器 handler, 设置 get/set/deleteProperty；

如果当前的 key 的值不是对象，则返回当前 key 的值。

#### set ####

设置的新值和老值不相等时，更新为新值，并触发更新（trigger）。

deleteProperty 当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）。

#### 2. effect ####

接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖

#### 3. track ####

#### 接收两个参数：target 和 key ####

－如果没有 activeEffect，则说明没有创建 effect 依赖

－如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性

－WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))

－WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性

－depsMap 中没有 key 属性，则 set(key, (dep = new Set())) －depsMap 中有 key 属性，则添加这个 activeEffect

#### 4.trigger ####

判断 WeakMap 中是否有 target 属性，WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()。

*END*

![1615022229360457.png][]

推荐阅读  点击标题可跳转

[Vue3的学习记录][Vue3]

[一篇文章上手Vue3中新增的API][Vue3_API]

[一份很棒的Vue3 学习清单][Vue3 1]

觉得本文对你有帮助？请分享给更多人

关注下方「前端开发博客」，提升前端技能

![bef9b2a9992778cea9e191dcf7a6c9ab.png][]

**如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~**

![ba4aba000481c8318d91116da99de504.gif][]

**   “分享、点赞、在看” 支持一波 ![47b130450650ad9ca7bee45b10020558.png][] **

[14ce0e78cbfc01352123252e4effd92a.png]: /images/20221021/954b6899841d490085a2f08b78f59e08.png
[1615022229360457.png]: /images/20221021/07c02bb7f98143559760dedb64c91182.png
[Vue3]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db8ecfb4ac07d9d833694017bafda4c13e03bc58addd5990bf30ff9b98752759e541d46425&idx=1&mid=2650084266&scene=21&sn=58f14236bcf9b99fdd4269bac5ca634d#wechat_redirect
[Vue3_API]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db9b52b4ac12443eabfb911e3894191a0dd5d304e44deb9fd2e27d9bcdf8aaba34edbae51f&idx=2&mid=2650080823&scene=21&sn=467d888769e1bb1bb27731c732fb6847#wechat_redirect
[Vue3 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db96b3b4ac1fa5cdcaf43b2c6786fae0d75ceb0aa37c7410a0e35a05cdc7b2b7a1b11f7a21&idx=2&mid=2650082262&scene=21&sn=c09037f9f70d08a2c4622e565e9e0b87#wechat_redirect
[bef9b2a9992778cea9e191dcf7a6c9ab.png]: /images/20221021/4afc6b96c420431b8f7d318118f5c487.png
[ba4aba000481c8318d91116da99de504.gif]: /images/20221021/647e5e7aba2943f3a511cf70240ce265.png
[47b130450650ad9ca7bee45b10020558.png]: /images/20221021/d3bb4275640a442c8846f9810c79f70a.png