最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
View：负责展示数据
-
Controller：用户交互的地方，例如点击事件
-
思想：Controller将Model的数据展示在View上
MVVM
-
VM：就是View-Model，数据双向绑定
-
Model：取数据的地方
-
View：展示数据的地方
-
思想：View和Model实现数据同步，不需要手动更新
注意：Vue不严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue可以使用
ref进行通信
5、Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？
-
JQuery直接操作DOM，而Vue不直接操作DOM，而是只需操作数据
-
Vue的虚拟DOM技术，能适配多端
-
Vue集成了一些库，大大提高开发效率，例如Route、Vuex等等
6、为什么data是个函数并且返回一个对象呢？
防止组件被多个页面使用时，造成的变量互相污染
7、使用过哪些Vue的修饰符呢？
-
.lazy：输入框失焦时才会更新v-model的值 -
.trim：讲v-model绑定的值首位空格给去掉 -
.number：将v-medol绑定的值转数字 -
.stop：阻止事件冒泡 -
.capture：事件的捕获 -
.self：点击事件绑定本身才触发 -
.once：事件只触发一次 -
.prevent：阻止默认事件 -
.native：绑定事件在自定义组件上时，确保能执行 -
.left、.middle、.right：鼠标左中右键的触发 -
passive：相当于给移动端滚动事件加一个.lazy -
camel：确保变量名会被识别成驼峰命名 -
.sync：简化子修改父值的步骤
8、路由的几种模式？
-
hash：哈希模式，根据hash值的更改进行组件切换，而不刷新页面
-
history：历史模式，依赖于HTML5的pushState和replaceState
-
abstract：适用于Node
9、路由的钩子函数？
全局钩子
-
beforeEach：跳转路由前
-
to：将要跳转进入的路由对象
-
from：将要离开的路由对象
-
next：执行跳转的方法
-
afterEach：路由跳转后
-
to：将要跳转进入的路由对象
路由独享钩子
routes: [
{
path: ‘/xxx’,
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]
组件内路由钩子
-
beforeRouteEnter(to, from, next)：跳转路由渲染组件时触发
-
beforeRouteUpdate(to, from, next)：跳转路由且组件被复用时触发
-
beforeRouteLeave(to, from, next)：跳转路由且离开组件时触发
10、使用过哪些Vue的内部指令呢？
-
v-text：元素的textContent -
v-html：元素的innerHTML -
v-show：通过样式display改变显隐 -
v-if：通过操作DOM改变显隐 -
v-else：配合v-if -
v-else-id：配合v-else -
v-for：循环渲染 -
v-on：绑定事件，缩写@ -
v-bind：绑定变量，缩写: -
v-model：双向绑定 -
v-slot：插槽 -
v-once：只渲染一次 -
v-pre：跳过元素编译 -
v-cloak：隐藏双括号，有值再显示
11、组件之间的传值方式有哪些？
-
父传子，子组件通过
props接收 -
子传父，子组件使用
$emit对父组件进行传值 -
父子之间通过
$parent和$chidren获取实例进而通信 -
通过
vuex进行状态管理 -
通过
eventBus进行跨组件值传递 -
provide和inject，官方不建议使用 -
$ref获取实例，进而传值 -
路由传值
-
localStorage、sessionStorage
12、如何设置动态class，动态style？
-
动态class对象：
<div :class="{ 'is-active': true, 'red': isRed }"></div> -
动态class数组：
<div :class="['is-active', isRed ? 'red' : '' ]"></div> -
动态style对象：
<div :style="{ color: textColor, fontSize: '18px' }"></div> -
动态style数组：`
13、v-if和v-show有何区别？
-
v-if：通过操作DOM来控制显隐，适用于偶尔显隐的情况 -
v-show：通过改变样式display属性控制显隐，适用于频繁显隐的情况
14、computed和watch有何区别？
-
computed：依赖多个变量计算出一个变量，且具有缓存机制，依赖值不变的情况下，会复用计算值。computed中不能进行异步操作 -
watch：通常监听一个变量的变化，而去做一些事，可异步操作 -
简单记就是：一般情况下
computed的多对一，watch一对多
15、Vue的生命周期？
-
beforeCreate：实例Vue，未初始化和响应式数据 -
created：已初始化和响应式数据，可访问数据 -
beforeMount：render调用，虚拟DOM生成，未转真实DOM -
mounted：真实DOM挂载完成 -
beforeUpdate：数据更新，新虚拟DOM生成 -
updated：新旧虚拟DOM进行对比，打补丁，然后进行真实DOM更新 -
beforeDestroy：实例销毁前，仍可访问数据 -
destroy：实例销毁，子实例销毁，指令解绑，解绑本实例的事件 -
activated：keep-alive所缓存组件激活时调用 -
deactivated：keep-alive所缓存组件停用时调用 -
errorCaptured：子孙组件的错误捕获，此函数可返回false阻止继续向上传播
16、为什么v-if和v-for不建议用在同一标签？
v-for优先级高于v-if，每项都通过v-for渲染出来后再去通过v-if判断显隐
17、 vuex的有哪些属性？用处是什么？
-
state：定义初始状态 -
getter：从store从取数据 -
mutation：更改store中状态，只能同步操作 -
action：用于提交mutation，而不直接更改状态，可异步操作 -
module：store的模块拆分
18、不需要响应式的数据应该怎么处理？
-
定义在data的return之外
-
使用Object.freeze进行数据冻结
19、watch有哪些属性，分别有什么用？
-
immediate：初次加载时立即执行
-
deep：是否进行深度监听
-
handler：监听的回调函数
20、父子组件生命周期顺序？
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
21、对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？
-
原因：Object.defineProperty没有对对象的新属性进行劫持
-
解决：
-
新增属性：
Vue.set(target, key, value) -
删除属性：
Vue.delete(target, key)
22、直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？
-
原因：Vue出于性能考虑没有对数组下标进行劫持，而是通过改写数组原型方法
-
解决：
-
splice：arr.splice(index, 1, value) -
Vue.set(target, index, value)
23、插槽的使用以及原理？
普通插槽 普通插槽slot会被当做子元素进行解析，最终会被解析成一个_t函数，他接收的第一个参数为插槽的名称，默认是default，也就是_t('default')，执行此函数进行最终元素的渲染，如果是具名插槽，则传对应的插槽名 作用域插槽 插槽会被封装成一个函数放置在scopeSlotes对象中，解析时_t第二个参数接收子组件的数据，并进行渲染
24、为什么不建议用index做key，为什么不建议用随机数做key？
list: [
{ name: ‘阿敏’, id: ‘123’ },
{ name: ‘阿红’, id: ‘124’ },
{ name: ‘阿花’, id: ‘125’ }
]
渲染为
现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ })
渲染为
新旧对比
可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了阿花，虽然达到了渲染目的，但是损耗性能
现在我们使用id来做key，渲染为
现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ })，渲染为
新旧对比
可以看出，原有的三项都不变，只是新增了阿林这个人，这才是最理想的结果
用index和用随机数都是同理，随机数每次都在变；
25、自定义指令的钩子函数？
这里只说Vue2的
-
bind：指令绑定到指定元素时调用，只调用一次 -
inserted：指定元素插入父节点时调用 -
update：所在组件的 VNode 更新时调用 -
componnetUpdated：所在组件以及其子组件 VNode 全部更新后调用 -
unbind：只调用一次，指令与元素解绑时调用
26、说说nextTick的用处？
修改数据时不能马上得到最新的DOM信息，所以需要使用nextTick，在nectTick回调中可以获取最新DOM信息
27、为什么nextTick优先是微任务？
优先是Promise.then方法，是个微任务，这样可以避免多一次队列，进而少一次UI渲染，节省性能
28、Vue的SSR是什么？有什么好处？
SSR全称Server Side Render
-
有利于SEO：由于是在服务端，将数据填充进HTML之后再推送到浏览器，所以有利于SEO的爬取
-
首屏渲染快
29、Vue响应式是怎么实现的？
-
1、劫持：通过
Object.defineProperty对对象进行递归劫持属性的get、set -
2、观察者模式：使用
watcher进行观察数据使用的地方 -
3、发布订阅模式：使用
dep收集watcher，数据更改时，通过notify方法通知dep里的watcher去进行相应的更新 -
4、数组：数组没有使用劫持的模式，而是通过重写数组原型上的方法，来实现数组的响应式
30、为什么只对对象劫持，而要对数组进行方法重写？
数组的元素大概率是成百上千的，所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写，实现数组的响应式
31、Vue.set方法的原理？
Vue.set(target, key, value)
-
第一步：判断target是数组的话，则调用target.splice(key, 1, value)
-
第二步：判断target是对象的话，再判断传入的key是否已存在target中
-
是：直接target[key] = value
-
否：调用defineReactive(target, key, val)进行响应式处理
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.ob
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}
32、Vue.delete方法的原理？
Vue.delete(target, key)
-
第一步：判断target是否为数组，是的话调用target.splice(key, 1)
-
第二步：判断target是对象的话，调用delete关键字删除属性，并调用__ob__.dep.notify进行更新通知
export default function del (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.ob
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}
33、Vue的computed和watch的原理？
34、Vue的模板编译原理？
35、nextTick的原理？
维护一个数组，每次调用时讲回调函数压入这个数组，然后优先选择微任务，在微任务回调中去执行数组中的所有回调，同时维护一个布尔值，确保每一次队列进行一次执行数组所有回调
let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
pending = false; //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacksi;
}
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== “undefined”) {
// 如果支持promise
const p = Promise.resolve();
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道
HTML
-
HTML5有哪些新特性？
-
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
-
如何实现浏览器内多个标签页之间的通信？
-
⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
-
简述⼀下src与href的区别？
-
cookies,sessionStorage,localStorage 的区别？
-
HTML5 的离线储存的使用和原理？
-
怎样处理 移动端 1px 被 渲染成 2px 问题？
-
iframe 的优缺点？
-
Canvas 和 SVG 图形的区别是什么？
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问：0.1 + 0.2 === 0.3 嘛？为什么？
-
JS 数据类型
-
写代码：实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的？
-
new 一个函数发生了什么
-
什么是作用域？
-
JS 隐式转换，显示转换
-
了解 this 嘛，bind，call，apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行，Event Loop
-
手写题：Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些？
-
PWA使用过吗？serviceWorker的使用原理是啥？
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
-
事件循环机制 （Event Loop）
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
