一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍（2021版） PDF，面试官问的源码问题绝对稳了！

Vue3.0 对于我们前端人的重要性 —— 2021年面试必备

前言

2020年09月18日，vue3.0正式发布。随着它的发布，Vue.js再次被推上了前端的风口浪尖。

同时，面试官的提问也将加入一些有关Vue3.0的新元素（相信近期去面试的小伙伴或多或少都会被问到Vue3.0的知识点）。

今天就分析总结了一些Vue的面试题（本文讲的非常详细，争取大家都能看懂，对大家有所帮助）

整理面试题

一、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()。

二、响应式是惰性的

在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。

在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

基础用法：

let datas={num:0
}
let proxy=new Proxy(datas,{get(target,property){return target[property]+=value},set(target,property,value){target[property]+=value}
})

三、vue3新增Composition API

vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。
解决options api在大型项目中，options api不好拆分和重用的问题。

setup介绍

setup 是 Vue3.0新增的一个选项，他是组件内使用 Composition API的入口。

setup 执行时机

setup 执行时机是在 beforeCreate 之前执行。

setup 参数说明

使用setup时，它接受两个参数：

props: 组件传入的属性

context

setup 中接受的props是响应式的，当传入新的 props 时，会及时被更新。由于是响应式的，所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示例，这段代码会让 props 不再支持响应式：

// demo.vue
export default defineComponent ({setup(props, context) {const { name } = propsconsole.log(name)},
})

四、 Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Options Api
包含一个描述组件选项（data、methods、props等）的对象options；
API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项；
使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；

composition Api
vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。
解决options api在大型项目中，options api不好拆分和重用的问题。

五、vue3新增内置组件 Teleport（哆啦 A 梦中的任意门）

Teleport就是一种将代码组织逻辑依旧放在组件中，这样我们能够使用组件内部的数据状态，控制组件展示的形式，但是最后渲染的地方可以是任意的，而不是局限于组件内部

Teleport 的使用：

<template><teleport to="body" class="modal" v-if="show"><div class="modal-mask" @click="close"></div><slot></slot></teleport>
</template><script>
import "./style.scss";
export default {props: {show: Boolean,},methods: {close() {this.$emit("close");},},
};
</script>

六、Props初始化和更新流程改进
七、Vue3 slot是什么？并说一下详细的用法？
八、Vue 3.0 在编译方面有哪些优化？
九、Vue3 依赖注入子孙组件如何共享数据
十、Vue3 侦听器实现原理与使用场景
十一、Vue3 组件实现原理核心源码解读
十二、Vuex 数据流管理方案
十三、原生服务端渲染（SSR）的实现、同构开发
十四、Nuxt.js 集成式SSR框架