面试官：Vue3.0的设计目标是什么？做了哪些优化?

以你之姓@ 2023-01-11 04:59 87阅读 0赞

![format_png][]

## 一、设计目标 ##

不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下`Vue3`之前我们或许会面临的问题

*  随着功能的增长，复杂组件的代码变得越来越难以维护
 *  缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制
 *  类型推断不够友好
 *  `bundle`的时间太久了

而 `Vue3` 经过长达两三年时间的筹备，做了哪些事情？

我们从结果反推

*  更小
 *  更快
 *  TypeScript支持
 *  API设计一致性
 *  提高自身可维护性
 *  开放更多底层功能

一句话概述，就是更小更快更友好了

### 更小 ###

`Vue3`移除一些不常用的 `API`

引入`tree-shaking`，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了

### 更快 ###

主要体现在编译方面：

*  diff算法优化
 *  静态提升
 *  事件监听缓存
 *  SSR优化

下篇文章我们会进一步介绍

### 更友好 ###

`vue3`在兼顾`vue2`的`options API`的同时还推出了`composition API`，大大增加了代码的逻辑组织和代码复用能力

这里代码简单演示下：

存在一个获取鼠标位置的函数

import { toRefs, reactive } from 'vue';
    function useMouse(){
        const state = reactive({x:0,y:0});
        const update = e=>{
            state.x = e.pageX;
            state.y = e.pageY;
        }
        onMounted(()=>{
            window.addEventListener('mousemove',update);
        })
        onUnmounted(()=>{
            window.removeEventListener('mousemove',update);
        })
    
        return toRefs(state);
    }

我们只需要调用这个函数，即可获取`x`、`y`的坐标，完全不用关注实现过程

试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率大大提高

同时，`VUE3`是基于`typescipt`编写的，可以享受到自动的类型定义提示

## 三、优化方案 ##

`vue3`从很多层面都做了优化，可以分成三个方面：

*  源码
 *  性能
 *  语法 API

### 源码 ###

源码可以从两个层面展开：

*  源码管理
 *  TypeScript

#### 源码管理 ####

`vue3`整个源码是通过 `monorepo`的方式维护的，根据功能将不同的模块拆分到`packages`目录下面不同的子目录中

![format_png 1][]

这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性

另外一些 `package`（比如 `reactivity` 响应式库）是可以独立于 `Vue` 使用的，这样用户如果只想使用 `Vue3`的响应式能力，可以单独依赖这个响应式库而不用去依赖整个 `Vue`

#### TypeScript ####

`Vue3`是基于`typeScript`编写的，提供了更好的类型检查，能支持复杂的类型推导

### 性能 ###

`vue3`是从什么哪些方面对性能进行进一步优化呢？

*  体积优化
 *  编译优化
 *  数据劫持优化

这里讲述数据劫持：

在`vue2`中，数据劫持是通过`Object.defineProperty`，这个 API 有一些缺陷，并不能检测对象属性的添加和删除

Object.defineProperty(data, 'a',{
      get(){
        // track
      },
      set(){
        // trigger
      }
    })

尽管`Vue`为了解决这个问题提供了 `set`和`delete`实例方法，但是对于用户来说，还是增加了一定的心智负担

同时在面对嵌套层级比较深的情况下，就存在性能问题

default {
      data: {
        a: {
          b: {
              c: {
              d: 1
            }
          }
        }
      }
    }

相比之下，`vue3`是通过`proxy`监听整个对象，那么对于删除还是监听当然也能监听到

同时`Proxy` 并不能监听到内部深层次的对象变化，而 `Vue3` 的处理方式是在`getter` 中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归

### 语法 API ###

这里当然说的就是`composition API`，其两大显著的优化：

*  优化逻辑组织
 *  优化逻辑复用

#### 逻辑组织 ####

一张图，我们可以很直观地感受到 `Composition API`在逻辑组织方面的优势

![format_png 2][]

相同功能的代码编写在一块，而不像`options API`那样，各个功能的代码混成一块

#### 逻辑复用 ####

在`vue2`中，我们是通过`mixin`实现功能混合，如果多个`mixin`混合，会存在两个非常明显的问题：命名冲突和数据来源不清晰

而通过`composition`这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可

同样是上文的获取鼠标位置的例子

import { toRefs, reactive, onUnmounted, onMounted } from 'vue';
    function useMouse(){
        const state = reactive({x:0,y:0});
        const update = e=>{
            state.x = e.pageX;
            state.y = e.pageY;
        }
        onMounted(()=>{
            window.addEventListener('mousemove',update);
        })
        onUnmounted(()=>{
            window.removeEventListener('mousemove',update);
        })
    
        return toRefs(state);
    }

组件使用

import useMousePosition from './mouse'
    export default {
        setup() {
            const { x, y } = useMousePosition()
            return { x, y }
        }
    }

可以看到，整个数据来源清晰了，即使去编写更多的`hook`函数，也不会出现命名冲突的问题

## 参考文献 ##

*  https://juejin.cn/post/6850418112878575629\#heading-5
 *  https://vue3js.cn/docs/zh

面试官VUE系列已完结：33／33

面试官ES6系列更新中: 10/10

[面试官：你是怎么理解ES6中 Promise的？使用场景？][ES6_ Promise]

[面试官：怎么理解ES6中 Generator的？使用场景？][ES6_ Generator]

[面试官：你是怎么理解ES6中Proxy的？使用场景?][ES6_Proxy]

[面试官：你是怎么理解ES6中Module的？使用场景？][ES6_Module]

[面试官：你是怎么理解ES6中 Decorator 的？使用场景？][ES6_ Decorator]

篇副有限，扫下方二维码查看往期

![format_png 3][]

[format_png]: /images/20221119/7bf11c5c6cf44c3483054d7e0168ec77.png
[format_png 1]: /images/20221119/f493ad4a2cad4c0aabe671d5b51fed8b.png
[format_png 2]: /images/20221119/1c4b2bce73e64b59bf07505c24f1f061.png
[ES6_ Promise]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4afcb674db92fcc02f55bdd76bfb5a09892fb4d46e278057841e19c506d39c4ffb38601&idx=2&mid=2247485177&scene=21&sn=21f2d4521bc054d5d53acc31db4c3922#wechat_redirect
[ES6_ Generator]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c55dcb674c4bb6dbb864233c0dad43b4fb09dfc54775978319888ae3f6ff5454aeba7e1a&idx=1&mid=2247485195&scene=21&sn=f0c7f093abb606c01232c80e1ad0c89e#wechat_redirect
[ES6_Proxy]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c575cb674c632af0779dc627346877d37ff6d10573644e54fea507245c9a95adcf2666a0&idx=2&mid=2247485219&scene=21&sn=5046bd8c24c819368c8fd984708c9b8a#wechat_redirect
[ES6_Module]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c56acb674c7c13035373a6596cdedd74e6bad48fd048ca8b149e748d249b8dc11670c64b&idx=1&mid=2247485244&scene=21&sn=43a12f41b10fb79837daaa5d1edb914e#wechat_redirect
[ES6_ Decorator]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c505cb674c13e1212e5297e5fc1ff1be6a56c56f6095aa37ffa9ee3767b4e7fbc0df3653&idx=1&mid=2247485267&scene=21&sn=fc4bb20795ecdbebaaec730dda48e1c6#wechat_redirect
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFCMWtxT2xFQ3UxNWdtSlRVQjNBc2o5bWljc3VyeFRiYnlrTmcweVZZQ1cxUUhOMXk1Nng3ZHpoTjcyZ0Q4QXdBaWJwck90dHRpY2NqWFEvNjQw?x-oss-process=image/format,png