一、Vue部分
1. vue 什么是MVVM
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也
可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成
UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
2. 介绍一下Vue生命周期
3. 为什么vue中data必须是一个函数 (数据污染)
4. 计算属性和watch的区别(首次加载时怎么触发watch, immediate: true)
5. vue 组件通信
6. query传参和params传参有什么区别
1.params传参可以提前在路由离定义好成为路由的一部分而query不需要
2.params传参或存在参数刷新丢失的情况而query不会
7. vuex 是什么? 有哪几种属性
它有 5 种属性,分别是 state、getter、mutation、action、module
state:vuex的基本数据,用来存储变量
geeter:从基本数据(state)派生的数据,相当于state的计算属性
mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
8. 介绍一下$nextTick以及时间循环机制
9.v-for 为什么需要绑定Key
10. Vue的路由hash模式 和 history模式的区别
hash模式在浏览器中有个符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取而history是采用HTML5的新特性,底层使用pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更,history 模:前端的 URL 必须和实际向后端发起请求的 URL 一致,后端如果缺少对 /items/id 的路由处理,将返回 404 错误。
11. 如何优化SPA应用的首屏加载速度慢的问题
1.将公用的JS库通过script标签外部引入,减小 app.bundel 的大小,让浏览器并行下载资源文件,提高下载速度;
2.在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
3.加一个首屏loading图,提升用户体验;
4.使用预渲染插件prerender-spa-plugin生成对特定路由静态的html文件
12. Vue中双向数据绑定是如何实现的
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;vue双向数据绑定,其核心是 Object.defineProperty()方法
13. 文件夹assets和static的区别
assets和static两个都是存放静态资源文件,但是assets中存放的静态资源文件在项目打包时会进行编译,而static不会
14. 简述vue中diff算法原理
diff算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch(打补丁),从以下几点来理解:
1. 当数据发生变化时,vue是怎么更新节点的?
要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。我们先根据真实DOM生成一颗 virtual DOM ,当 virtual DOM 某个节点的数据改变后会生成一个新的Vnode ,然后 Vnode 和 oldVnode 作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode 的值为 Vnode 。
diff的过程就是调用名为 patch 的函数,比较新旧节点,一边比较一边给 真实的DOM 打补丁。
2. virtual DOM和真实DOM的区别?
virtual DOM是将真实的 DOM 的数据抽取出来,以对象的形式模拟树形结构,diff算法比较的也是virtual DOM
3. diff的比较方式?
在采取diff算法比较新旧节点的时候,比较只会在同层级进行, 不会跨层级比较。
15. v-model 原理
v-model 只是语法糖而已。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
text 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change事件;
select 字段将 value 作为 prop 并将 change 作为事件。
注意:对于需要使用输入法的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。
在普通元素上:
input v-model=‘sth’
input v-bind:value=‘sth’ v-on:input=‘sth = $event.target.value’
16 你都做过哪些 Vue 的性能优化
对象层级不要过深,否则性能就会差。
不需要响应式的数据不要放在 data 中
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key,key最好是id值,且避免同时使用 v-if
大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
防止内部泄露,组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用
服务端渲染 SSR or 预渲染
二、js部分
1. var let const 区别
2. this指向
3. 箭头函数和普通函数的区别
4. 数组、对象遍历方法
5. 跨域是什么,如何解决跨域
6. 深拷贝和浅拷贝区别,如何实现一个深拷贝
7. 简述下Promise(Pending, Resolved, Rejected)
8. 简述下async/await 以及对于Promise 有什么优势
9. 简述下闭包
10. apply,call,bind三者的区别
- 三者都可以改变函数的this对象指向。
- 三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window。
- 三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入。
- bind 是返回绑定this之后的函数,便于稍后调用;apply 、call 则是立即执行 。
11. 说一下localstorage、sessionstorage区别
12. 简述下js的事件循环
三、CSS部分
1. 清除浮动的几种方式
2. 左右居中、上下居中的几种方式;
1. 利用绝对定位,先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心,然后再通过 translate 来调整元素的中心点到页面的中心。 该方法需要考虑浏览器兼容问题。
2. 利用绝对定位,设置四个方向的值都为 0,并将 margin 设置为 auto, 由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上 的居中。该方法适用于盒子有宽高的情况:
3. 利用绝对定位,先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心,然后再通过 margin 负值来调整元素的中心点到页面的中 心。该方法适用于盒子宽高已知的情况
4. 使 用 flex 布 局 , 通 过 align-items:center 和 justify-content:center设置容器的垂直和水平方向上为居中对齐, 然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的 问题,该方法在移动端用的较多
3. 如何覆盖组件库自定义样式;
4. 如何实现0.5px效果;
伪元素 + transform(放缩)
5. 有没有做过大屏,需要注意什么;
6. CSS 优化和提高性能的方法有哪些
加载性能:
(1)css 压缩:将写好的 css 进行打包压缩,可以减小文件体积。
(2)css 单一样式:当需要下边距和左边距的时候,很多时候会选 择 使 用 margin:top 0 bottom 0 ; 但 margin-bottom:bottom;margin-left:left;执行效率会更高。
(3)减少使用@import,建议使用 link,因为后者在页面加载时一 起加载,前者是等待页面加载完成之后再进行加载。 选择器性能: (
1)关键选择器(key selector)。选择器的最后面的部分为关键 选择器(即用来匹配目标元素的部分)。CSS 选择符是从右到左进行 匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定 是否是指定的元素等等;
(2)如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加 标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们 了)。
(3)避免使用通配规则,如*{}计算次数惊人,只对需要用到的元素 进行选择。
(4)尽量少的去对标签进行选择,而是用 class。
(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择 器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三 层,更多的使用类来关联每一个标签元素。
(6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重 复指定规则。
渲染性能:
(1)慎重使用高性能属性:浮动、定位。
(2)尽量减少页面重排、重绘。
(3)去除空规则:{}。空规则的产生原因一般来说是为了预留样 式。去除这些空规则无疑能减少 css 文档体积。
(4)属性值为 0 时,不加单位。
(5)属性值为浮动小数 0.**,可以省略小数点之前的 0。
(6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。
(7)不使用@import 前缀,它会影响 css 的加载速度。
(8)选择器优化嵌套,尽量避免层级过深。
(9)css 雪碧图,同一页面相近部分的小图标,方便使用,减少页 面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚, 再使用。
(10)正确使用 display 的属性,由于 display 的作用,某些样式组 合会无效,徒增样式体积的同时也影响解析性能。 170
(11)不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生, 国外却很流行。web fonts 通常体积庞大,而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。 可维护性、健壮性: (1)将具有相同属性的样式抽离出来,整合并通过 class 在页面中 进行使用,提高 css 的可维护性。 (2)样式与内容分离:将 css 代码定义到外部 css 中。
7. 常见的 CSS 布局单位
像素(px),百分比(%),em,rem,vw/vh