*集大成之面试题,我们不做面试题的创作者,只做面试题的搬运工(侵必删)
〇 理论
一个完整的URL 解析过程
1 用户输入 URL 地址。
2 对 URL 地址进行 DNS 域名解获得IP地址。
3 建立 TCP 连接(三次握手)。
4 浏览器向 web 服务器发送一个 HTTP 请求报文。
5 服务器返回 HTTP 响应报文给客户端。
6 关闭 TCP 连接(四次挥手)。
7 浏览器解析文档资源并渲染页面。
解析过程:浏览器解析的资源(html,svg,Xhtml等),解析完成后都会生成一个完整的DOM Tree ,css资源则会解析成CSS Rule Tree,生成之后进行浏览器渲染,保证脚本执行前已完成DOM渲染会放在body标签结束之后。
EventLoop是什么
- Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理,是一个程序结构,用于等待和发送消息和事件。
-
主要的宏任务有:
setTimeout
setInterval
setImmedate
MessageChannel
requestAnimationFrame
I/O
UI交互事件 -
微任务有:
console.log()
Promise.then
MutationObserver
Object.observe
process.nextTick
执行过程: 事件循环的顺序,决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环(即宏任务)。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的micro-task(微任务)。当所有可执行的micro-task(微任务)执行完毕之后。循环再次从macro-task(宏任务)开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task(微任务),这样一直循环下去
HTTP和HTTPS
什么是HTTP和HTTPS
-
HTTP :超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
-
HTTPS :是一种通过计算机网络进行安全通信的传输协议,经由HTTP进行通信,利用SSL/TLS建立全信道,加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证,同时保护交换数据的隐私与完整性。
PS:TLS是传输层加密协议,前身是SSL协议,由网景公司1995年发布,有时候两者不区分。
区别
1、HTTPS 协议需要到 CA (Certificate Authority,证书颁发机构)申请证书,一般免费证书较少,因而需要一定费用。(以前的网易官网是http,而网易邮箱是 https 。)
2、HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL 加密传输协议。
3、HTTP 和 HTTPS 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4、HTTP 的连接很简单,是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
https加密方式
-
共享密钥加密(对称密钥加密):客户端和服务器公用一个密匙用来对消息加解密,这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户端在发消息前用该密匙对消息加密,发送给服务器后,服务器再用该密匙进行解密拿到消息
-
公开密钥加密(非对称密钥加密):客户端和服务端均拥有一个公有密匙和一个私有密匙。公有密匙可以对外暴露,而私有密匙只有自己可见。使用公有密匙加密的消息,只有对应的私有密匙才能解开。反过来,使用私有密匙加密的消息,只有公有密匙才能解开。这样客户端在发送消息前,先用服务器的公匙对消息进行加密,服务器收到后再用自己的私匙进行解密。
-
数字证书
由数字证书认证机构(CA,certificate authority)和其相关机构颁发的公开密钥证书。
而https使用的是对称加密+非对称加密,使用非对称加密传输一个对称密钥K,让服务器和客户端都得知。然后两边都使用这个对称密钥K来加密解密收发数据。因为传输密钥K是用非对称加密方式,很难破解比较安全。而具体传输数据则是用对称加密方式
强缓存和协商缓存
- 强缓存(本地缓存):
直接使用使用本地缓存,不用跟服务器进行通信
header:Expires/Cache-Control
状态码为:200 - 协商缓存
将资源一些相关信息返回服务器,让服务器判断浏览器是否能直接使用本地缓存,整个过程至少与服务器通信一次
header:Last-Modified/Etag
状态码为:304
用户的行为对缓存的影响
用户操作 | Expires/Cache-Control (强缓存) | Last-Modified/Etag(协商缓存) |
---|---|---|
地址栏回车 | 有效 | 有效 |
页面链接跳转 | 有效 | 有效 |
新开窗口 | 有效 | 有效 |
前进后退 | 有效 | 有效 |
F5刷新 | 无效 | 有效 |
Ctrl+F5强制刷新 | 无效 | 无效 |
什么是 MVVM?
-
M(模型):模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。
-
V(视图):就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。
-
VM(视图模型):视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
Vue数据双向绑定原理
Vue2.X的双向绑定响应式原理
什么是响应式,也即是说,数据发生改变的时候,视图会重新渲染,匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性,设置 get 和 set 方法,每个声明的属性,都会有一个 专属的依赖收集器 subs,当页面使用到 某个属性时,触发 ObjectdefineProperty - get函数,页面的 watcher 就会被 放到 属性的依赖收集器 subs 中,在 数据变化时,通知更新;
当数据改变的时候,会触发Object.defineProperty - set函数,数据会遍历自己的 依赖收集器 subs,逐个通知 watcher,视图开始更新;
Vue3.x双向绑定响应式数据原理
Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层,Vue3是怎样处理这个问题的呢?
判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理, 这样就实现了深度观测。
监测数组的时候可能触发多次get/set,那么如何防止触发多次呢?我们可以判断key是否为当前被代理对象target自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行trigger。
Vue3 里为什么要用 Proxy API替代 defineProperty API?
- defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor,对 data 中的属性做了遍历 + 递归,为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。 - Proxy API的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作, 这就完全可以代理所有属性,将会带来很大的性能提升和更优的代码。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 - 响应式是惰性的。
在 Vue.js 2.x 中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行 Object.defineProperty 把每一层对象数据都变成响应式的,这无疑会有很大的性能消耗。
在 Vue.js 3.0 中,使用 Proxy API 并不能监听到对象内部深层次的属性变化,因此它的处理方式是在 getter 中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需实现响应式,减少性能消耗。
什么是虚拟DOM
virtual DOM 虚拟DOM,用普通js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。
目的是为了减少回流和重绘,提升性能。
虚拟DOM基本步骤
-
页面初始加载解析DOM树,将DOM解析为JS对象
[最终还需要将其映射成真实DOM,渲染到页面] -
DOM结构要发生变化,生成一个新的JS对象
-
DIFF比较,比较同级对象
-
将不同之处写入到patch对象中
-
渲染到页面
那么为什么用虚拟dom呢?
Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化,
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。
大白话:就是为了提高代码效率,渲染效果,就如往常的js jquery这些使用dom操作时都是一段复杂的过程,整个过程要遍历属性,标签啦,就是在你的代码上一遍遍寻找大半天还不知道有没有收获,很慢。而且做多件事情的时候只能一件件去做,浪费很多时间,而我们的虚拟dom呢,就是,把你想要做的事情都用小本子记起来(记在本地js对象上)在虚拟dom上更新完成后,再拿到真是的dom上去渲染,然后交给浏览器绘制页面呀。从头到末尾,人家知道每一步要做什么,而且可以同时做,还不会等到你的页面渲染完成后才出发,人家可是早早出发了,
真实DOM和虚拟DOM的区别
那么说回到真实DOM,虚拟DOM和真实DOM又有什么区别呢?
我想,应该会有一下几点:
- 虚拟DOM不会进行排版与重绘操作
- 真实DOM频繁排版与重绘的效率是相当低的
- 虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗
- 虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部
DIFF算法
Diff算法步骤
- 用js对象结构(虚拟DOM)表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
- 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
- 把所记录的差异应用到所构建的真正的DOM树上,视图就更新了
Diff 算法: 仅在同级的vnode间做diff,递归地进行同级vnode的diff,不仅仅是同层级对比,在diff算法中也会进行同key值对比和同组件对比
Diff 过程整体策略:深度优先,同层比较
key的作用
在使用v-forj添加唯一的key的作用标识,Diff算法就可以正确的识别此节点,找到正确的位置区更新新的节点,高效的更新虚拟DOM。
vue等单页面应用及其优缺点
缺点:
不支持低版本的浏览器,最低只支持到IE9;
不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);
第一次加载首页耗时相对长一些;
不可以使用浏览器的导航按钮需要自行实现前进、后退。
优点:
无刷新体验,提升了用户体验;
前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;
API 共享,同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快,内容的改变不需要重新加载整个页面。
一 Js
二 Vue
Vue2
vue 的优点是什么?
- 低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
- 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。
- 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
- 可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
vue生命周期的理解?
vue实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程
总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
beforeCreated()
在实例创建之间执行,数据未加载状态created()
在实例创建、数据加载后,能初始化数据,dom
渲染之前执行beforeMount()
虚拟dom
已创建完成,在数据渲染前最后一次更改数据mounted()
页面、数据渲染完成,真实dom
挂载完成beforeUpadate()
重新渲染之前触发updated()
数据已经更改完成,dom
也重新render
完成,更改数据会陷入死循环beforeDestory()
和destoryed()
前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行
vue中v-if和v-show有什么区别?
v-if和v-show都会让元素显示和隐藏,但是v-if是通过移除和添加dom元素,v-show是通过display:none来实现隐藏
v-show是css切换,v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if
V-if=’false’v-if是条件渲染,当false的时候不会渲染
使用v-if的时候,如果值为false,那么页面将不会有这个html标签生成
v-show则是不管值是为true还是false,html元素都会存在,只是css中的display显示或隐藏
v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。
为什么在使用v-for的时候需要添加key属性
因为vue在更新渲染dom的时候是根据新旧dom树进行对比的,使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。Vue的优化点之一
vue中的父子组件传值和兄弟组件传值都是如何实现的?
父向子传值,主要通过子组件的props,获取父组件绑定的数据
子向父传值,主要通过子组件利用$emit触发父组件上的事件
兄弟组件传值利用eventbus的方式,主要利用创建一个空的vm实例,作为中间者
组件之间数据共享
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。针对不同的使用场景,如何选择行之有效的通信方式?
1:props emit 缺点:如果组件嵌套层次多的话,数据传递比较繁琐
2:provide inject (依赖注入),缺点:不支持响应式
3:this.
r
o
o
t
t
h
i
s
.
root this.
rootthis.parent this.$refs
4: eventbus 缺点:数据不支持响应式
5: vuex 缺点:数据的读取和修改需要按照流程来操作,不适合小型项目
父子通信:
父组件向子组件传递数据可以通过 props
;
子组件向父组件是通过 $emit
、$on
事件;
provide / inject
;
还可以通过 $root
、$parent
、$refs
属性相互访问组件实例;
兄弟通信: eventbus
;Vuex
;
跨级通信: eventbus
;Vuex
;provide / inject;
如何让css只在当前组件中起作用
在每一个vue组件中都可以定义各自的css,js,如果希望组件内写的css只对当前组件起作用,只需要在style中写入scoped,即:
<style scoped></style>
$root
、$parent
、$refs
1、$root
Vue 子组件可以通过$root
属性获取vue的根实例,比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store
),因此可以代替vuex实现状态管理;
2、$parent
属性可以用来从一个子组件访问父组件的实例,可以替代将数据以 prop
的方式传入子组件的方式;当变更父级组件的数据的时候,容易造成调试和理解难度增加;
3、在子组件上使用ref
特性后,this.$refs
属性可以直接访问该子组件。可以代替事件$emit
和$on
的作用。使用方式是通过 ref
特性为这个子组件赋予一个 ID 引用,再通过this.$refs.testId
获取指定元素。注意:$refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
。
Vue输入框事件监听blur与change的差异
blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。
- 没有进行任何输入时,不会触发change
在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。 - 输入后值并没有发生变更
这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,keydown、input、keyup、blur都会触发,但change依旧不会触发。
vue store存储commit 和dispatch
主要区别是:
- dispatch:含有异步操作,例如向后台提交数据,写法:
this.$store.dispatch('action方法名',值)
- commit:同步操作,写法:
this.$store.commit('mutations方法名',值)
Vue项目性能优化
1.懒加载
懒加载应该是提高性能的最简单有效的方式了,一个项目加上懒加载速度和逼格都会上一个台阶。懒加载的意义在于按需加载,不会让项目刚开始运行速度就很慢,能大大的优化用户体验。Vue项目懒加载分为图片懒加载和路由懒加载,具体写法如下:
路由懒加载
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}
图片懒加载
<!--使用前需先安装配置vue-lazyload-->
<a href="javascript:;"><img v-lazy="'/static/img/abc.jpg'"></a>
2.代码优化
- 不要将所有的数据都放在data中,data中的数据都会增加getter和setter,会收集对应的 watcher
- vue 在 v-for 时给每项元素绑定事件需要用事件代理
- SPA 页面采用keep-alive缓存组件
- 拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 )
- v-if 当值为false时内部指令不会执行,具有阻断功能,很多情况下使用v-if替代v-show
- key 保证唯一性 ( 默认 vue 会采用就地复用策略 )
- Object.freeze 冻结数据
- 合理使用路由懒加载、异步组件
- 尽量采用runtime运行时版本
- 数据持久化的问题 (防抖、节流)
- 减少本地储存
3.用户体验优化
添加Loading
当用户需要等待时间较长时,必须添加等待loading,这个不多说,用处大大地
添加骨架屏
路由逻辑
路由逻辑是一个项目的核心,如果路由逻辑不通的话,用户很有可能点返回按钮的时候一直在两个页面之间跳转,进入死循环。其次,路由逻辑和用户体验息息相关,比如用户下完单应该跳转到订单详情页,而不是首页等等
样式统一
两个页面的相同功能按钮,它的大小颜色如果不用的话就会让人感觉你的App不够专业
vue-cli如何新增自定义指令?
分为局部指令和全局指令,通过directive [dəˈrektɪv] ,创建,
在单文件中创建局部指令,使用Vue.directive创建全局指令
vue更新数组时触发视图更新的方法
Vue.set ==========Vue.set(target,key,value)这个方法主要是用于避开vue不能检测属性被添加的限制
Vue.set(array, indexOfItem, newValue)//indexOfItem指的索引
this.array.$set(indexOfItem, newValue)
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
Vue.delete 这个方法主要用于避开vue不能检测到属性被删除;
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
Vue 对象怎么添加删除 ? $set 有神吗作用
当⽣成vue实例,再次给数据赋值,有时候数据并没有更新视图,是因为受到es5 的限制,vue不能检测到对象属性的添加或者删除,vue在初始化实例的时候将属性 转换为getter/setter, 使⽤ s e t , 让 其 有 g e t t e r / s e t t e r V u e . s e t ( ) 是 将 s e t 函 数 绑 定 在 V u e 的 构 造 函 数 上 , t h i s . set,让其有getter/setter Vue.set()是将set函数绑定在Vue的构造函数上,this. set,让其有getter/setterVue.set()是将set函数绑定在Vue的构造函数上,this.set是将set函数绑定在Vue原 型上
Vue中computed和watch的区别
computed特性
1.是计算值,
2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
watch特性
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作
3.无缓存性,页面重新渲染时值不变化也会执行
- 计算属性可以简化差值表达式写法
- 计算属性变量定义在computed中,可以直接使用在{}中的,跟methods中函数类似,只不过有利于缓存,性能更好
- 计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。
methods与computed的区别
- computed是属性调用,而methods是函数调用;
- computed带有缓存功能,而methods不是;
- 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
- 可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
Vue3.2
三 Vuex
vuex 原理
vuex 仅仅是作为 vue 的一个插件而存在,不像 Redux,MobX 等库可以应用于所有框架,vuex 只能使用在 vue 上,很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统,
vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;
Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走action,但action也是无法直接修改State的,还是需要通过Mutation来修改State的数据。最后,根据State的变化,渲染到视图上。
vuex 是什么?怎么使用?哪种功能场景使用它?
vue 框架中全局状态管理。新建了一个目录 store,…… export 。import 引入 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
简要介绍各模块在流程中的功能:
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性,主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
modules
项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
vuex 有哪几种属性
有 5 种,分别是 state、getter、mutation、action、module
vuex 的 store 特性是什么
- vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
- state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
- 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
vuex 的 getter 特性是什么
- getter 可以对 state 进行计算操作,它就是 store 的计算属性
- 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用
- 如果一个状态只在一个组件内使用,是可以不用 getters
vuex 的 mutation 特性是什么
- action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
- action 可以包含任意异步操作
vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中
如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
不用 vuex 会带来什么问题
- 可维护性会下降,你要修改数据,你得维护 3 个地方
- 可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的
- 增加耦合,大量的上传派发,会让耦合性大大的增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背
使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的示例,store 是如何实现注入的?美团
Vue.use(Vuex) 方法执行的是 install 方法,它实现了 Vue 实例对象的 init 方法封装和注入,使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。
state 内部支持模块配置和模块嵌套,如何实现的?美团
在 store 构造方法中有 makeLocalContext 方法,所有 module 都会有一个 local context,根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder’, payload)这类 action 时,默认的拿到都是 module 的 local state,如果要访问最外层或者是其他 module 的 state,只能从 rootState 按照 path 路径逐步进行访问。
在执行 dispatch 触发 action(commit 同理)的时候,只需传入(type, payload),action 执行函数中第一个参数 store 从哪里获取的?美团
store 初始化时,所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder’, payload)的时候,actions 中 type 为 submitOrder 的所有处理方法都是被封装后的,其第一个参数为当前的 store 对象,所以能够获取到 { dispatch, commit, state, rootState } 等数据。
Vuex 如何区分 state 是外部直接修改,还是通过 mutation 方法修改的?美团
Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法,其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true,然后才能修改 state,修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state,但是并没有修改_committing 标志位,所以只要 watch 一下 state,state change 时判断是否_committing 值为 true,即可判断修改的合法性。
Pinia(vuex5)
替代vuex 的方案比vuex更好用更简单
pinia
Pinia与Vuex的对比
四 vue-router
vue-router是什么?有哪些组件?
- Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
<router-link>
和<router-view>
和<keep-alive>
active-class 是哪个组件的属性?
active-class是router-link终端属性,用来做选中样式的切换,当router-link标签被点击时将会应用这个样式
vue路由的钩子函数
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
指令keep-alive
keep-alive的作用以及好处
在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
在vue-router写着keep-alive,keep-alive的含义:
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。
使用方法
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
参数解释
include - 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。
怎么定义vue-router的动态路由?怎么获取传过来的值?
- 动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:
{
path: '/details/:id'
name: 'Details'
components: Details
}
12345
访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。
- 当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数
console.log(this.$route.params.id)
vue-router 传参
name传递
to来传递
采用url传参
Params
- 只能使用name,不能使用path
- 参数不会显示在路径上
- 浏览器强制刷新参数会被清空,
Query:
- 参数会显示在路径上,刷新不会被清空
- name 可以使用path路径
vue-router的两种模式
hash
- 原理是onhashchage事件,可以在window对象上监听这个事件
history
- 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
- 需要后台配置支持。如果刷新时,服务器没有响应响应的资源,会刷出404,
vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。
全局的:**前置守卫、后置钩子(beforeEach,afterEach)beforeResolve
**单个路由独享的:**beforeEnter
**组件级的:beforeRouteEnter(不能获取组件实例 this)、beforeRouteUpdate、beforeRouteLeave
这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;
先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate,可以通过 next 获取组件的实例对象,如:next( (vm)=>{} ),参数vm就是组件的实例化对象。
完整的 vue-router 导航解析流程
1.导航被触发;
2.在失活的组件里调用beforeRouteLeave守卫;
3.调用全局beforeEach守卫;
4.在复用组件里调用beforeRouteUpdate守卫;
5.调用路由配置里的beforeEnter守卫;
6.解析异步路由组件;
7.在被激活的组件里调用beforeRouteEnter守卫;
8.调用全局beforeResolve守卫;
9.导航被确认;
10…调用全局的afterEach钩子;
11.DOM更新;
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。
webpack构建流程
-
初始化参数,从配置文件和shell语句中读到的参数合并,得到最后的参数
-
开始编译:用合并得到的参数初始化complier对象,加载是所有配置的插件,执行run方法开始编译
-
确定入口,通过entry找到入口文件
-
编译模块,从入口文件出发,调用所有配置的loader对模块进行解析翻译,在找到该模块依赖的模块进行处理
-
完成模块编译,得到每个模块被翻译之后的最终的内容和依赖关系
-
输出资源,根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk,在把每个chunk转换成一个单独的文件加载到输出列表
-
输出完成,确定输出的路径和文件名,把内容写到文件系统中
如何利用webpack来优化前端性能
-
压缩代码。uglifyJsPlugin 压缩js代码, mini-css-extract-plugin 压缩css代码
-
利用CDN加速,将引用的静态资源修改为CDN上对应的路径,可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
-
删除死代码(tree shaking),css需要使用Purify-CSS
-
提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码),用optimization.splitChunks和optimization.runtimeChunk来代替
什么是bundle,什么是chunk,什么是module?
bundle:有webpack打包出来的文件
chunk:webpack在进行模块的依赖分析的时候,代码分割出来的代码块
module:开发中的单个模块
DefinePlugin
DefinePlugin :允许创建一个在编译时可以配置的全局变量
DllPlugin
使用DllPlugin可以减少基础模块编译次数,动态链接库插件,其原理是吧网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。在dll中大多包含的时常用的第三方模块,只要这些模块版本不升级,就只需要被编译一次。
*注意*
DllPlugin参数中的name必须要和output.library值保持一致,并且生成的mainfest文件中会引用output.library值
happyPack开启多线程loader转换
运行在node.js之上的webpack时单线程模型,也就是只能一个一个文件进行处理,不能并行处理,happypack可以将任务分解给多个子进程,最后将结果发给主进程,js是单线程模型,只能通过这种多线程的方式提高性能
有哪些常见的Loader?他们是解决什么问题的?
- file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
- url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
- source-map-loader:加载额外的 Source Map 文件,以方便断点调试
- image-loader:加载并且压缩图片文件
- babel-loader:把 ES6 转换成 ES5
- css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
- style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
- eslint-loader:通过 ESLint 检查 JavaScript 代码
有哪些常见的Plugin?他们是解决什么问题的?
- define-plugin:定义环境变量
- commons-chunk-plugin:提取公共代码
- uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码
Loader和Plugin的不同?
不同的作用
- Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
- Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法
- Loader在module.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)
- Plugin在plugins中单独配置。 类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入。
是否写过Loader和Plugin?描述一下编写loader或plugin的思路?
Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容,并且每个Loader通过链式操作,将源文件一步步翻译成想要的样子。
编写Loader时要遵循单一原则,每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容(source),可以通过返回值的方式将处理后的内容输出,也可以调用this.callback()方法,将内容返回给webpack。 还可以通过 this.async()生成一个callback函数,再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。
相对于Loader而言,Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
webpack打包优化
1、版本升级
与Webpack相关的工具版本要升级,如Node.js, npm, yarn等。
2、在loader. 上尽可能少的应用模块
比如在loader.上使用include, exclude等,让loader的作用范围尽量小。
3、plugin 的使用
plugin尽可能精简,并推荐使用官方的plugin, 或官方推荐的plugin。
4、合理的使用resolve
十 优化
vue 优化
一.源码优化
1、代码模块化,咱们可以把很多常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含义,复用性越高越好,可配置型越强越好,包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
2、for循环设置key值,在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。
3、Vue路由设置成懒加载,当首屏渲染的时候,能够加快渲染速度。
4、更加理解Vue的生命周期,不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null。
5、可以使用keep-alive,keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。
6、扁平化Store数据结构,
二.打包优化
1、修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,如果不关掉,生成环境是可以通过map去查看源码的,并且可以开启gzip压缩,使打包过后体积变小。
2、使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
3、减少图片使用,因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。
4、按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,可以只引入需要用到的组件。
三 用户体验优化
1、添加Loading,当用户需要等待时间较长时,必须添加等待loading,这个不多说,用处大大地
2、添加骨架屏
3、路由逻辑,路由逻辑是一个项目的核心,如果路由逻辑不通的话,用户很有可能点返回按钮的时候一直在两个页面之间跳转,进入死循环。其次,路由逻辑和用户体验息息相关,比如用户下完单应该跳转到订单详情页,而不是首页等等
4、样式统一,两个页面的相同功能按钮,它的大小颜色如果不用的话就会让人感觉你的App不够专业
react 优化
bind函数
绑定this的方式:一般有下面几种方式
- constructor中绑定
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}
//然后可以
<p onClick={this.handleClick}>123456
- 使用时绑定
<p onClick={this.handleClick.bind(this)}>1
- 箭头函数
<p onClick={() => { this.handleClick() }}>1
- 第一种,构造函数每一次渲染的时候只会执行 一遍;
- 而第二种方法,在每次render()的时候都会重新执行一遍函数;
- 第三种方法的话,每一次render()的时候,都会生成一个新的箭头函数
使用代码分割
实现按需加载,例如在点击事件之后才会执行加载
使用之前:
import OtherComponent from './OtherComponent';
使用之后:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
组件化
组件分类:逻辑业务组件,渲染组件,可复用组件
webpack
webpack优化前端性能
- 压缩代码。删除多余的代码、注释、简化代码的写法等等方式
- 利用 CDN 加速。在构建过程中,将引用的静态资源路径修改为 CDN 上对应的路径
- 删除死代码,将代码中永远不会走到的片段删除掉
- 优化图片,对于小图可以使用 base64 的方式写入文件中
- 按照路由拆分代码,实现按需加载,提取公共代码
- 给打包出来的文件名添加哈希,实现浏览器缓存文件
对css的优化使用mini-css-extract-plugin插件
对于CSS文件中包含的不必要的字符,例如注释、空白和缩进,我们可以在生产环境中将其删除,以达到减小文件大小的目的,这种技术也叫minification。而这些可以利用webpack构建工具进行实现。
optimize-css-assets-webpack-plugin插件用于优化或者压缩CSS资源
十一其他
uni-app中的坑
-
如果是自定义的导航栏,video是原生的video,它的层级真的是太高了,想要盖住还得使用cover-view才能盖住。
-
picker真的是太不好用了,还不能修改文字,做中英文版本的话得用**picker-view**自定义组件或者使用插件。
-
当你需要将时间转化为时间戳的时候需要用到Date.parse这个方法,例如:
2019-09-20 10:12:43
这个字符串时间要转化成时间戳,你需要将-
替换为/
,下附代码。
Date.parse(xxx.replace(/-/g, '/')) / 1000 #xxx为字符串时间
- 组件内引入图片要使用绝对路径。
/static/...
- 主页面的生命周期用
onLoad
代替created
,onReady
代替mounted
。组件内使用原来的created
与mounted
。 - 用
tap
事件代替click
事件。 - 阻止事件冒泡时要在外层加一层标签
<view @tap.stop="stop"></view>
,直接在需要使用的方法上加.stop
无效。 <picker>
中最好写一个<view class="style">
写样式,而不是在picker
上加样式。<scroll-view>
中写position: fixed
,在ios下会有兼容性问题。- 出现遮罩后阻止页面滚动,可以在遮罩的
touchmove
事件中阻止默认事件。@touchmove.prevent=""
。 <swiper>
一定要给高度才会生效,一般是动态获取里面的元素或列表高度再赋值给<swiper>
。
map
注意事项
- 小程序和app-vue中,
<map>
组件是由引擎创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。在<map>
上绘制内容,可使用组件自带的marker、controls等属性,也可以使用<cover-view>
组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,参考。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始,支持map组件的同层渲染,不再有层级问题。 - App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致,和小程序的地图略有差异。App端使用map推荐使用nvue。
- App端使用到本地图像的话,打包前需要设置资源为释放模式,在manifest文件内app-plus新增runmode节点,设置值为liberate。
- 在涉及层级问题的小程序中和app-vue中,请勿在 scroll-view、swiper、picker-view、movable-view 中使用
<map>
组件。 - 小程序和 app-vue 中,css 动画对
<map>
组件无效。 - map 组件使用的经纬度是国测局坐标,调用 uni.getLocation 接口需要指定 type 为 gcj02。
<map>
组件在不同平台的底层引擎是不同的:H5、微信小程序为腾讯地图;App、支付宝小程序为高德地图;百度小程序、快应用为百度地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要,建议使用高德地图。- map 组件默认的api是参考微信小程序的,如需要使用plus.map,可以通过
$getAppMap
获取原生地图对象,详见。注意nvue的map组件不是plus.map对象,无法使用$getAppMap
- H5 端获取定位信息,需要部署在 https 服务上,本地预览(localhost)仍然可以使用 http 协议。
- 无GPS模块或GPS无信号的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质,获取AppKey,打包时需要在manifest文件中勾选相应模块,在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致,证书信息匹配。在manifest可视化界面有详细申请指南。
- H5 端使用地图和定位相关需要在腾讯地图开放平台申请密钥,填写在 manifest.json 中。
- ios nvue Color 不支持 ARGB 十六进制,使用 rgba(r,g,b,a) 代替