其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。
-
前后端职责更好的分离,架构清晰
-
用户体验好,服务器相对压力小
【缺点】:
-
首次加载耗时久
-
SEO
难优化
通过数据模型(普通的 JS
对象)来驱动视图的更新,就是响应式。
以实例的 data
选项为例,当我们把一个普通的 JS
对象传入 Vue
实例作为 data
时,Vue
将遍历这个对象的所有属性,然后通过 Object.defineProperty
(vue 2.x)或者 Proxy
(vue 3.x)定义属性的 getter
和 setter
,从而让 Vue
能够追踪当这些属性访问与修改。具体是怎么追踪的呢?每个组件实例都对应一个 watcher
实例,它会在组件渲染的过程中把接触过的数据记录为依赖,这个过程也称为依赖收集,然后当依赖的 setter
触发时,就会通知 watcher
,从而使他们关联的组件重新渲染。
Vue
双向数据绑定是指:数据变化更新视图,视图变化更新数据,例如输入框输入内容变化时,data
中对应的数据同步变化,data
中绑定的数据变化时,输入框的内容同步变化。
Vue
主要通过4个部分来实现双向数据绑定:
-
监听器
Observer
:对数据对象进行遍历,利用Object.defineProperty()
在属性上都加上getter
和setter
,从而监听数据的变化。 -
解析器
Compile
:解析模板指令,将模板中的变量都替换成数据,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变化就会调用更新函数进行更新。 -
订阅者
Watcher
:订阅者是监听器和解析器之间通信的桥梁,主要任务是订阅监听器中的属性值变化的消息,当收到属性值变化的消息时,触发解析器中对应的更新函数。 -
订阅器
Dep
:订阅器采用发布-订阅设计模式,用来收集订阅者Watcher
对监听器Observer
和 订阅者Watcher
进行统一管理。
【Q5】为什么 Vue
要采用异步渲染?异步渲染是如何实现的?
如果不采用异步渲染,那么每次更新数据都会进行重新渲染,这会对性能大打折扣,异步渲染是提高性能的手段之一。
只要监听到数据变化,Vue
将开启一个队列,并缓冲在同一个事件循环中发生的所有数据变更。如果同一个 watcher
被多次触发,只会被推入到队列中一次。然后,在下一个事件循环中,Vue
刷新队列并执行实际工作。Vue
内部对异步队列常使用原生的 Promise.then
、MutationObserver
和 setImmediate
。如果环境不支持,则采用 setTimeout(fun,0)
。
在 Vue
官方中,提供了7个操作数组的方法:
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
用于 “响应式” 的操作数组,也就是说,通过以上7个方法改变数组的元素,这会导致 data
中的数据变化,从而导致视图发生变化。除此以外,还可以通过 “新数组” 替换 “旧数组” 的方式来触发视图层的改变。但是,千万不能通过索引直接改变一个数组,这样不会引起视图层的改变,只是单纯的改变了数据。还有,不能通过修改数组长度来删除元素。
Vue
将 data
中的数组进行了原型链重写,指向了自己所定义的数组原型方法(也就是说上面的7个方法是Vue
重写过的),从而实现了通过这些方法改变数组就可以通知视图层更新的效果。
Vue
实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM
、渲染、更新、卸载等一些列过程,就是生命周期。
生命周期可大致分为 8 个阶段:实例创建前/后,挂载前/后,更新前/后,销毁前/后,分别对应8个回调钩子。
-
实例创建前。
beforeCreate()
——vue
实例的挂载元素$el
和数据对象data
都是undefined
,还未进行初始化。 -
实例创建后。
created()
—— 完成了data
数据初始化,但未挂载。 -
挂载前。
beforeMount
——vue
实例的$el
和data
都初始化了,相关的render
函数首次被调用。实例已完成以下配置:编译模板,把data
里面的数据和模板生成html
。但是此时没有挂载到html
元素上!!! -
挂载后。
mounted
——el
被$el
替换,并挂载到html
元素上。 -
更新前。
beforeUpdate
—— 在数据更新之前调用。 -
更新后。
updated
—— 此时组件DOM
已经更新,所以可以执行依赖于DOM
的操作。 -
销毁前。
beforeDestroy
—— 实例销毁前调用 -
销毁后。
destroyed
—— 实例销毁后调用。
两者都用于控制 “显示/隐藏” 元素,v-if
是真正的条件渲染,如果条件为假,则该元素不会被挂载到 DOM
树上,只有当条件为真时才进行渲染。v-show
本质是控制 css
的 display
属性来进行显示隐藏的,不管初始条件是什么,该元素都会被渲染。
官方是这样来介绍的:所有的 prop
都使得其父子 prop
之间形成了一个单向下行绑定,父级 prop
的更新会向下流动到子组件中,但是反过来则不行。这也说明了不能在子组件中改变 prop
,prop
永远都是只读的。如果非得改变 prop
的话,可以考虑在子组件中通过计算属性来修改。
每次父组件发生更新时,子组件中所有的 prop
都将会刷新为最新的值。
js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
些方式?
[外链图片转存中…(img-7WUTrjY2-1715878034861)]
[外链图片转存中…(img-OBwj2nbD-1715878034862)]