面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？

偏执的太偏执、 2023-01-03 15:26 146阅读 0赞

![format_png][]

## 一、Vue3介绍 ##

关于`vue3`的重构背景，看看尤大怎么说：

「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了

在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」

简要就是：

*  利用新的语言特性(es6)
 *  解决架构问题

## 哪些变化 ##

![format_png 1][]

从上图中，我们可以概览`Vue3`的新特性，如下：

*  速度更快
 *  体积减少
 *  更易维护
 *  更接近原生
 *  更易使用

### 速度更快 ###

`vue3`相比`vue2`

*  重写了虚拟`Dom`实现
 *  编译模板的优化
 *  更高效的组件初始化
 *  `undate`性能提高1.3~2倍
 *  `SSR`速度提高了2~3倍

![format_png 2][]

### 体积更小 ###

通过`webpack`的`tree-shaking`功能，可以将无用模块“剪辑”，仅打包需要的

能够`tree-shaking`，有两大好处：

*  对开发人员，能够对`vue`实现更多其他的功能，而不必担忧整体体积过大
 *  对使用者，打包出来的包体积变小了

`vue`可以开发出更多其他的功能，而不必担忧`vue`打包出来的整体体积过多

![format_png 3][]

### 更易维护 ###

#### compositon Api ####

*  可与现有的`Options API`一起使用
 *  灵活的逻辑组合与复用
 *  `Vue3`模块可以和其他框架搭配使用

![format_png 4][]

#### 更好的Typescript支持 ####

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

![format_png 5][]

#### 编译器重写 ####

![format_png 6][]

### 更接近原生 ###

可以自定义渲染 API

![format_png 7][]

### 更易使用 ###

响应式 `Api` 暴露出来

![format_png 8][]

轻松识别组件重新渲染原因

![format_png 9][]

## 二、Vue3新增特性 ##

Vue 3 中需要关注的一些新功能包括：

*  framents
 *  Teleport
 *  composition Api
 *  createRenderer

### framents ###

在 `Vue3.x` 中，组件现在支持有多个根节点

<template>
      <header>...</header>
      <main v-bind="$attrs">...</main>
      <footer>...</footer>
    </template>

### Teleport ###

`Teleport` 是一种能够将我们的模板移动到 `DOM` 中 `Vue app` 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

在`vue2`中，像 `modals`,`toast` 等这样的元素，如果我们嵌套在 `Vue` 的某个组件内部，那么处理嵌套组件的定位、`z-index` 和样式就会变得很困难

通过`Teleport`，我们可以在组件的逻辑位置写模板代码，然后在 `Vue` 应用范围之外渲染它

<button @click="showToast" class="btn">打开 toast</button>
    
    <teleport to="#teleport-target">
        <div v-if="visible" class="toast-wrap">
            <div class="toast-msg">我是一个 Toast 文案</div>
        </div>
    </teleport>

### createRenderer ###

通过`createRenderer`，我们能够构建自定义渲染器，我们能够将 `vue` 的开发模型扩展到其他平台

我们可以将其生成在`canvas`画布上

![format_png 10][]

关于`createRenderer`，我们了解下基本使用，就不展开讲述了

import { createRenderer } from '@vue/runtime-core'
    
    const { render, createApp } = createRenderer({
      patchProp,
      insert,
      remove,
      createElement,
      // ...
    })
    
    export { render, createApp }
    
    export * from '@vue/runtime-core'

### composition Api ###

composition Api，也就是组合式`api`，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理

![format_png 11][]

关于`compositon api`的使用，这里以下图展开

![format_png 12][]

简单使用:

export default {
        setup() {
            const count = ref(0)
            const double = computed(() => count.value * 2)
            function increment() {
                count.value++
            }
            onMounted(() => console.log('component mounted!'))
            return {
                count,
                double,
                increment
            }
        }
    }

### 三、非兼容变更 ###

### Global API ###

*  全局 `Vue API` 已更改为使用应用程序实例
 *  全局和内部 `API` 已经被重构为可 `tree-shakable`

### 模板指令 ###

*  组件上 `v-model` 用法已更改
 *  `<template v-for>`和 非 `v-for`节点上`key`用法已更改
 *  在同一元素上使用的 `v-if` 和 `v-for` 优先级已更改
 *  `v-bind="object"` 现在排序敏感
 *  `v-for` 中的 `ref` 不再注册 `ref` 数组

### 组件 ###

*  只能使用普通函数创建功能组件
 *  `functional` 属性在单文件组件 `(SFC)`
 *  异步组件现在需要 `defineAsyncComponent` 方法来创建

### 渲染函数 ###

*  渲染函数`API`改变
 *  `$scopedSlots` property 已删除，所有插槽都通过 `$slots` 作为函数暴露
 *  自定义指令 API 已更改为与组件生命周期一致
 *  一些转换 `class` 被重命名了：
 *   *  `v-enter` \-> `v-enter-from`
     *  `v-leave` \-> `v-leave-from`
 *  组件 `watch` 选项和实例方法 `$watch`不再支持点分隔字符串路径，请改用计算函数作为参数
 *  在 `Vue 2.x` 中，应用根容器的 `outerHTML` 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。`VUE3.x` 现在使用应用程序容器的 `innerHTML`。

### 其他小改变 ###

*  `destroyed` 生命周期选项被重命名为 `unmounted`
 *  `beforeDestroy` 生命周期选项被重命名为 `beforeUnmount`
 *  `[prop default`工厂函数不再有权访问 `this` 是上下文
 *  自定义指令 API 已更改为与组件生命周期一致
 *  `data` 应始终声明为函数
 *  来自 `mixin` 的 `data` 选项现在可简单地合并
 *  `attribute` 强制策略已更改
 *  一些过渡 `class` 被重命名
 *  组建 watch 选项和实例方法 `$watch`不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
 *  `<template>` 没有特殊指令的标记 (`v-if/else-if/else`、`v-for` 或 `v-slot`) 现在被视为普通元素，并将生成原生的 `<template>` 元素，而不是渲染其内部内容。
 *  在`Vue 2.x` 中，应用根容器的 `outerHTML` 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。`Vue 3.x` 现在使用应用容器的 `innerHTML`，这意味着容器本身不再被视为模板的一部分。

### 移除 API ###

*  `keyCode` 支持作为 `v-on` 的修饰符
 *  `$on`，`$off`和`$once` 实例方法
 *  过滤`filter`
 *  内联模板 `attribute`
 *  `$destroy` 实例方法。用户不应再手动管理单个`Vue` 组件的生命周期。

## 感谢信 ##

到今天，**「 面试官Vue系列 」**就正式结束了，共计33个工作日，33篇文章，死磕自已，愉悦大家

感谢一路陪伴，支持的小伙伴们，还有正在阅读本文的你，你们的每一次点赞，在看，转发，都是对我们精神上最大的鼓励与支持

而你的鼓励与支持，恰恰也是让我们继续蒙眼前行的力量，旅途的结束代表着新的征程开始，接下来会继续给大家带来「 **面试****官E****S6****系列 」**

最后，如果你觉得Vue系列给你带来了些许帮助，或者对我们后面的系列有所期待，想请你帮个小忙，动动手指点个赞，让我们能感受到有你一直在与我们同行

![format_png 13][]

##  ##

## 参考文献 ##

*  https://vue3js.cn/docs/zh

面试官VUE系列总进度：33／33

[面试官：你是怎么处理vue项目中的错误的？][vue]

[面试官：vue项目如何部署？有遇到布署服务器后刷新404问题吗？][vue_404]

[面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？][Vue]

[面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？][Vue 1]

[面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？][vue 1]

[面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？][SSR_SSR]

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

![format_png 14][]

[format_png]: /images/20221119/218a61c135b4418d9e48476f86bab5b3.png
[format_png 1]: /images/20221119/d0efe1f64def4f858134c6ad03df42d8.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljSTh1Wjg0U2ZmS0hrU0ZZcTBmOU8xdTFLUm92OWhxU1pXSkc2ZjhSR3lDVzFXS3FkQ3JkYkN3LzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljWllJMFVIUXJXY2NXRnoxcTd3N2NEb0k1bHdVRTg5aWNtNnZnQ3pnTHlVT3RFdTIzUFVjSktHZy82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljSGQwNzNwY25udkRsbG4wdjhwYW9EdFhkMWZkYWhRemljUWliajFBN3BaZ2JpYWdBZjFoUmRwYVl3LzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljT3dORW41SFdhaWFGdlFQSkJXdUhidnJuUDFIbkFOaWFBMHhYcXFJZmdQMFRiY0NEbEY5TUVEaWJ3LzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljOWczMk5yNTg0MmpZQzBJZjllcVVGTGoxSFAxcmJ6SE03V2tqZ3o5WFdDUlFCbHJSeW5pYUdNQS82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljekdMQTQxUUV0STVnakdkQ0IzQ041NmlhQ3p6Wjg3RGRiOVdHTnJucHBiTW9zOGliSU43aWFaYk1RLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljTkcyZ3AzS1REV2liQ2xiNGNBSXVpY1pwN2JZaGZxajlFYzJkaGx5dGIyQ2o0d2JSOGZpYTJkcUNBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljbWhpYm9pYTJyUTFJRzd5TGpwMmVJTVRRSHo5blM0WVJZV0VvaWNBbUIxSG1FNXVUcndDcjl2UHFRLzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljd2pMaWNKUktPWlpyOVd5R2liZVkxaWFTWjdrMzI3RnlEaWJHN2lhUExTOHZqUVNSbzdSMVNvaWE3NUZnLzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljbDBCRVlBVmY5RjhjeEtHbXA0RmdIQmtZaWMxR3FMeGdPVEVZTFVjN0tBbWNScWljeXAwVE5GY1EvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljelNrZFR2NFV6bVdyOU9aRTc0QVB1QTFoV0h5QW9uS0hOcm5JZnZraWE5UGxtQ05XeG5lV2poQS82NDA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9nSDMxdUY5VklpYlFYZ0pGWGF6VGFtcHR6eXNHODdERWljVEJ1ZEVpYUVTaWNwZVJtT2R1dms2VEwzZ1RrcWlhekxPZ0lrVGxhZW5VbkUyQkpjTDc3OUN2WlFBLzY0MA?x-oss-process=image/format,png
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c742cb674e54188a8325db726e04cabbc87613bb90605a55f0dcc1aa32bde1cf5c845788&idx=2&mid=2247484692&scene=21&sn=71ad09fc1ab2338d132e2289d5a26ed3#wechat_redirect
[vue_404]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6aacb674fbc3f5013974644a7f62d8d97883aece9861207d2c9cd5c9e25c70eb2045c21&idx=1&mid=2247484668&scene=21&sn=927a6ccee00378a491f99234134d7253#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6b8cb674faed209c152d1934b0ac9c6ec653ae4ae78ec4bd6ac254644a4c54d3bf9cabd&idx=1&mid=2247484654&scene=21&sn=2305434f7e8d165a33e9f0d0e4ac0cb1#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6b4cb674fa2c30d5640b0328d6a9fc5392d8246683508fab849ab2802e22998d6de0db5&idx=1&mid=2247484642&scene=21&sn=f38d2fdd9c89526dd415f15fa3289380#wechat_redirect
[vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c682cb674f94dff89689298aa5390e6484c45bc765288189528cf148606e2feb17c467f4&idx=1&mid=2247484628&scene=21&sn=43953745061afc65ed51f074b28679c5#wechat_redirect
[SSR_SSR]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6ebcb674ffd46b20d29b32f156e7cb8acb2c54ade0ed206b7ed887f6474a55849858ad4&idx=1&mid=2247484605&scene=21&sn=92e2e45cbba021fe685f0f8252ffe8b4#wechat_redirect
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlJBRWlibkFlaWJFQXJKNG1Hd3ZrUnZZQ1BXWW16WEU2eVVMbTJYSFhYZGxSWmNreEV0a003S0FGZm1MNW1hQVVMdXNGR1BpYmVncjdRY2cvNjQw?x-oss-process=image/format,png