一起来看看这份集齐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