Vue3.0 的新特征 | Vue3.0 面试题总结

Posted 2021-08-31 QIANDXX

Vue3.0 从整体来说，既修改了 Vue2.x 时期遗留的一些缺陷，又引入了 组合式 API 、自定义渲染 API 等新特性。这些新特性的引入，不仅为 Vue 的发展注入了更多的活力，同时也塑造了 Vue 使用场景方面更多的可能性。

Vue3.0 的新特性

• Proxy 响应式绑定
• Tree-Shaking Support
• 组合式 API
• Fragment 片段、Teleport、Suspense
• 自定义渲染 API
• 源码优化

一、Proxy 响应式绑定

Vue2.x 内部是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter 来实现响应式的。因为这个 API 它必须预先知道要拦截的 key 是什么，所以它并不能检测对象属性的添加和删除。直接造成了数组元素的直接修改不会触发响应式机制，这个很多初学者所谓的 bug。

例如，对象obj的text属性进行劫持：

const obj = {};
Object.defineProperty(obj, 'text', {
    get: function() {
        console.log('get val'); 
    },
    set: function(newVal) {
        console.log('set val:' + newVal);
        document.getElementById('input').value = newVal;
        document.getElementById('span').innerhtml = newVal;
    }
});
const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
    obj.text = e.target.value;
})

Vue3.0 使用了 Proxy API 做数据劫持，它劫持的是整个对象，自然对于对象的属性的增加和删除都能检测到，自然也不会在存在上述的问题。

将上面例子进行改写：

const input = document.getElementById('input');
const p = document.getElementById('p');
const obj = {};
const newObj = new Proxy(obj, {
    get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        console.log(target, key, value, receiver);
        if (key === 'text') {
            input.value = value;
            p.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
    },
});
input.addEventListener('keyup', function(e) {
    newObj.text = e.target.value;
});

通过 Proxy 实现双向响应式绑定，相比 defineProperty 的遍历属性的方式效率更高，性能更好，另外 Virtual DOM 更新只 diff 动态部分、事件缓存等，也带来了性能上的提升。

二、Tree-Shaking Support（摇树优化）

tree-sharking 即在构建工具构建后消除程序中无用的代码，来减少包的体积。

相比 Vue2.x 导入整个 Vue 对象，Vue3.0 支持按需导入，只打包需要的代码。Tree-Shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。像我们在项目中如果没有引入 Transition、KeepAlive 等不常用的组件，那么它们对应的代码就不会打包进去。

三、组合式 API

首先需要明确的是，Vue2.x 中组件传统的 data，computed，watch，methods 写法，我们称之为选项式 API（Options API ）。

（1）选项式 API 存在的缺陷

随着业务复杂度越来越高，代码量会不断的加大；由于代码需要遵循 option 的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高。比如，很长的 methods 区域代码、data变量声明与方法区域未在一起。

（2）与 mixins 的比较

对于上述提到的问题，我们可能会想到会 mixins 来解决，但是当抽离并引用了大量的 mixins，你就会发现两个不可避免的问题：命名冲突和数据来源不清晰。

组合式 API 和 mixins 二者的差别：

• 层级不同：组合式 API 与组件是嵌套关系，而mixin与组件是同 层级关系
• 影响面不同：组合式 API 作为组件的被调用方，并且变量逻辑是组件控制，耦合性很低。而 mixins 是耦合在代码逻辑里，并且存在变量的互相引用，为将来的升级和维护埋下隐患。

（3）与 React Hook 的比较

不可置否，组合式 API 的诞生确实受到了 React Hooks 的启发。对于使用者而言，使用一些概念时大同小异，这也不用就此贴上抄袭的标签，因为很多语言上都有相似的概念或者语法，比如 TS 可以规范变量的声明，但是 Java 中为了方便也出现了 var。事实上，组合式 API 的实现与 React Hook 是截然不同的。

组合式 API 使用上 比 React Hooks简便了不少：

• 同样的逻辑组合、组件复用能力
• 只调用一次 setup 方法
  更加符合 JS 直觉
  没有闭包变量问题
  没有内存/GC压力
  不存在内联回调导致子组件永远更新的问题

（4）组合式 API 的使用

下面简单概述了组合式 API 的使用，主要是一些 方法增加 和 概念迁移：

• setup方法：
  vue3.0 中，所有的代码逻辑将在setup方法中实现，包括 data、watchcomputed、methods 等，并且不再有this。
  vue3.0 会先执行setup方法，再执行兼容2.x的其他方法。
  vue3.0 中setup方法在组件生命周期内只执行一次，不会重复执行。

• 生命周期钩子：
  2.x 中生命周期钩子放在跟 methods 同级属性下。
  3.x 中需要先导入钩子，然后在 setup 方法中注册钩子回调，并且钩子命名也跟 React 保持一样。
  3.x 移除了 2.x 中的 beforeCreate 和 created 钩子，通过 setup 方法代替。

// vue2.x
export default {
    data () {
        return {}
    },
    methods: {
        ...
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {}
}

// vue3.x
import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
} from 'vue'

export default {
    setup() {
        onBeforeMount(() => {
            console.log('component is onBeforeMount')
        })
        onMounted(() => {
            console.log('component is onMounted')
        })
        onBeforeUpdate(() => {
            console.log('component is onBeforeUpdate')
        })
        onUpdated(() => {
            console.log('component is onUpdated')
        })
        onBeforeUnmount(() => {
            console.log('component is onBeforeUnmount')
        })
        onUnmounted(() => {
            console.log('component is onUnmounted')
        })
    }
}

• 响应式数据对象相关方法：reactive 方法、ref 方法、toRef 等方法，数据的只读属性，计算属性，方法的拆解，watchEffect，useStore 等相关方法不在此一一详解。

四、Fragment 片段、Teleport、Suspense

（1）Fragment 片段

• Vue2.x中，vue template只允许有一个根节点。
• Vue3.0中，vue template支持多个根节点。

// vue2.x
<template>
    <div>
        <Headers></Headers>
        <Main></Main>
        <Footer></Footer>
    </div>
</template>

// Vue3.0
<template>
    <Headers></Headers>
    <Main></Main>
    <Footer></Footer>
</template>

（2）Teleport

Teleport 是一种能够将我们的模板渲染至指定 DOM 节点，不受父级 style 、v-show 等属性影响，但 data、prop 数据依旧能够共用的技术；类似于 React 的 Portal。

（3）Suspense

<Suspense> 是一个特殊的组件，它将呈现回退内容，而不是对于的组件，直到满足条件为止，这种情况通常是组件 setup 功能中发生的异步操作或者是异步组件中使用。

使用场景：父组件展示的内容包含异步的子组件，异步的子组件需要一定的时间才可以加载并展示，这时就需要一个组件处理一些占位逻辑或者加载异常逻辑。

// vue2.x
<template>
    <div>
        <div v-if="!loading">
            ...
        </div>
        <div v-if="loading">Loading...</div>
    </div>
</template>

// vue3.x
<Suspense>
    <template >
        <Suspended-component />
    </template>
    <template #fallback>
        Loading...
    </template>
</Suspense>

五、自定义渲染 API

自定义渲染 API 将 Virtual DOM（虚拟DOM）和平台相关的渲染分离。

通过 createRendererAPI 我们可以自定义 Virtual DOM 渲染到某一平台中时的所有操作，比如新增、修改、删除一个“元素”，我们可以这些方法中替换或修改为我们自定义的逻辑，从而打造一个我们自定义的渲染器。

利用这个 API，在 Vue3.0 中我们可以自由方便地去构建 Web（浏览器）平台或非 Web 平台的自定义渲染器。

在 Vue 中是利用 runtime-dom 方法提供的一个上层的抽象层，它帮我们完成了 Virtual DOM 渲染到 Web DOM 中的复杂浏览器接口编程操作。

通过编写自定义渲染器，极大丰富了 Vue 的使用场景。

六、源码优化

（1）使用 monorepo 来管理源码

• Vue.js 2.x 的源码托管在 src 目录，然后依据功能拆分 出了 compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sfc（.vue 单文件解析相关代码）、shared（共享工具代码）等目录。
• Vue.js 3.0，整个源码是通过 monorepo 的方式维护的，根据功能将不同的模块拆分到 packages 目录下面不同的子目录中，每个 package 有各自的 API、类型定义和测试。

（2）使用 Typescript 来开发源码

• Vue.js 2.x 选用 Flow 做类型检查，来避免一些因类型问题导致的错误，但是 Flow 对于一些复杂场景类型的检查，支持得并不好。
• Vue.js 3.0 抛弃了 Flow ，使用 TypeScript 重构了整个项目。TypeScript 提供了更好的类型检查，能支持复杂的类型推导；由于源码就使用 TypeScript 编写，也省去了单独维护 d.ts 文件的麻烦。

Vue3 面试题总结

Vue3.0 源码分析

• Vue.js 3.0 响应式系统的实现原理？
• 响应式是惰性的
• vue3 新增 Composition API
• Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的 Options Api 有什么区别？
• vue3 新增内置组件 Teleport
• Props 初始化和更新流程改进
• Vue3 Slot内容分发
• Vue 3.0 在编译方面有哪些优化？
• Vue3 依赖注入子孙组件如何共享数据
• Vue3 侦听器实现原理与使用场景
• Vue3 组件实现原理核心源码解读
• Vuex 数据流管理方案
• 原生服务端渲染（SSR）的实现、同构开发
• Nuxt.js 集成式 SSR 框架

vue3.0实战应用

• 说说 Vue2.0 和 Vue3.0 有什么区别
• Vue3 的新特性
• 基于 vite/webpack
• 实现 Vue3 工程化部署
• 掌握 setup 和 10 种响应式系统 API
• 掌握新生命周期函数
• 模板 refs 的使用
• Vue3 中的响应式系统和 dom-diff

需要前端学习笔记、大厂面试题、 Vue3.0 面试题 PDF文档（含答案解析），点击此处免费领取！