【前端知识之Vue3】一文搞懂Vue3到底做了哪些优化

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue3相对于Vue2做了哪些优化。

---

一、Vue2存在的问题

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

由于上述Vue2的问题，Vue3的优化明显更小更快更友好了

二、Vue3的更小

Vue3移除一些不常用的API，引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。简单来说，treeshaking就是找出使用的代码。
Vue2中，无论使用什么功能，最终都会出现在生产代码中，主要原因是Vue实例在项目是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。

import Vue from 'vue'
 
Vue.nextTick(() => {
   })

Vue3中引入tree shaking特性，将全局API进行分块，如果不使用某些功能，就不会出现在打包文件中。

import {
    nextTick, observable } from 'vue'
 
nextTick(() => {
   })

三、Vue3的更快

在更快方面，Vue3主要做出的优化有：diff算法优化、静态提升、事件监听缓存、SSR优化。

1. diff算法优化

vue3在diff算法中相比于vue2增加了静态标记，作用是为会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较。比如下述例子：

<template>
    <div id="content">
        <p class="text">静态文本</p>
        <p class="text">静态文本</p>
        <p class="text">{
  { message }}</p>
        <p class="text">静态文本</p>
        ...
        <p class="text">静态文本</p>
    </div>
</template>

这里的组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多diff和遍历其实都是不需要的，会造成性能浪费。此时会给{ {message}}标签标记一个flag=1，其他的静态文本会标记flag=-1，代表永远都不会进行diff操作。这样比较的时候可以直接选择flag=1的节点进行比较。

2. 静态提升

Vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，这样就可以免去了重复的创建节点。
下面举一个例子来展示一下静态提升的源码：

<span>你好</span>

<div>{
  { message }}</div>

没做静态提升之前：

export function render(