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 } = props
console.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框架
🎁在面试的时候肯定免不了被问到其他知识点例如HTML/CSS,JavaScript,浏览器,小程序,Webpack我也总结出来了，需要共享的朋友可以评论区留言“面试”或者发简信
- javascript语法的知识点和面试题总结
- 前端面试题总结以及一些面试心得
- 微信小程序的面试题以及项目中遇到的坑
- 浏览器面试题
- 数据结构与算法
Vue3.0实战
一、说说Vue2.0和Vue3.0有什么区别
1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：
- 可直接监听数组类型的数据变化
- 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
- 可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
- 直接实现对象属性的新增/删除
2.新增Composition API，更好的逻辑复用和代码组织
3.重构 Virtual DOM
- 模板编译时的优化，将一些静态节点编译成常量
- slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
- 模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）
4.代码结构调整，更便于Tree shaking，使得体积更小
5.使用Typescript替换Flow
二、Vue3的新特性有哪些
1、响应系统的变动
由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。
Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。
2、虚拟DOM重写（Virtual DOM Rewrite）
虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。
3、组件渲染的优化（优化插槽生成）
Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。
4、静态树提升（Static Tree Hoisting）
使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
5、静态属性提升（Static Props Hoisting）
此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。
总体来说：
- ts支持
- 源码更易读
- 更小
- 更容易维护
- 更加友好
- 更易用
三、基于vite/webpack实现Vue3工程化部署
四、掌握setup和10种响应式系统API
五、掌握新生命周期函数
六、模板refs的使用
七、Vue3中的响应式系统和dom-diff
vue核心知识点
常规篇
1.vuex的action有返回值吗？返回的是什么？
- store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
- Action 通常是异步的，要知道 action 什么时候结束或者组合多个 action以处理更加复杂的异步流程，可以通过
定义action时返回一个promise对象，就可以在派发action的时候就可以通过处理返回的 Promise处理异步流程
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返
回的 Promise 才会执行。
2.为什么不直接分发mutation,而要通过分发action之后提交 mutation变更状态
- mutation 必须同步执行，我们可以在 action 内部执行异步操作
- 可以进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）
3.为什么 v-for 和 v-if 不建议用在一起
- 当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环
中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费 - 这种场景建议使用 computed，先对数据进行过滤
4.组件中的data为什么是一个函数？
- 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
- 如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲
突，data必须是一个函数。
5.子组件为什么不可以修改父组件传递的Prop？怎么理解vue的单向数据流？
- Vue提倡单向数据流,即父级props的更新会流向子组件,但是反过来则不行。
- 这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。
- 如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。
6.v-model是如何实现双向绑定的？
- v-model是用来在表单控件或者组件上创建双向绑定的
- 他的本质是v-bind和v-on的语法糖
- 在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件
7.computed 和 watch 的区别和运用的场景？
8.Vue2.x组件通信有哪些方式？
9.为什么不建议用index作为key?
10.说一下虚拟Dom以及key属性的作用
11.为什么不建议用index作为key?
生命周期篇
1.说一下你对Vue的生命周期的理解
2.Vue中组件生命周期调用顺序是什么样的？
3.在什么阶段才能访问操作DOM？
4.你的接口请求一般放在哪个生命周期中？
路由篇
1.vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么？
2.路由懒加载是什么意思？如何实现路由懒加载？
3.在 Vue 实例中编写生命周期 hook 或其他 option/properties 时，为什么不使用箭头函数？
4.说说你对keep-alive组件的了解
5.说说你对SSR的了解
6.你都做过哪些Vue的性能优化？
最后
说实话，作为一名前端工程师，不论你需不需要面试都应该好好看下这份资料。我大概撸了一遍，真的是堪称典范，拿到手总是不亏的~
以上《Vue面试知识点和Vue3.0面试题总结》我已经全部为大家打包准备好了，希望对正在学习的你有所帮助！
更多：
- 前端基础（HTML/CSS）
- JavaScript面试题
- ES6
- Node.js
- React面试题
- 算法面试题
- 浏览器渲染
- 计算机网络
- Webpack
- 设计模式
- 微信小程序实战
