0
点赞
收藏
分享

微信扫一扫

前端面试题---2022

扒皮狼 2022-03-12 阅读 152

*集大成之面试题,我们不做面试题的创作者,只做面试题的搬运工(侵必删)

〇 理论

一个完整的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单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理,是一个程序结构,用于等待和发送消息和事件。
  1. 主要的宏任务有:

    setTimeout
    setInterval
    setImmedate
    MessageChannel
    requestAnimationFrame
    I/O
    UI交互事件

  2. 微任务有:
    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加密方式

  1. 共享密钥加密(对称密钥加密):客户端和服务器公用一个密匙用来对消息加解密,这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户端在发消息前用该密匙对消息加密,发送给服务器后,服务器再用该密匙进行解密拿到消息

  2. 公开密钥加密(非对称密钥加密):客户端和服务端均拥有一个公有密匙和一个私有密匙。公有密匙可以对外暴露,而私有密匙只有自己可见。使用公有密匙加密的消息,只有对应的私有密匙才能解开。反过来,使用私有密匙加密的消息,只有公有密匙才能解开。这样客户端在发送消息前,先用服务器的公匙对消息进行加密,服务器收到后再用自己的私匙进行解密。

  3. 数字证书
    由数字证书认证机构(CA,certificate authority)和其相关机构颁发的公开密钥证书。

https使用的是对称加密+非对称加密,使用非对称加密传输一个对称密钥K,让服务器和客户端都得知。然后两边都使用这个对称密钥K来加密解密收发数据。因为传输密钥K是用非对称加密方式,很难破解比较安全。而具体传输数据则是用对称加密方式

强缓存和协商缓存

  1. 强缓存(本地缓存):
    直接使用使用本地缓存,不用跟服务器进行通信
    header:Expires/Cache-Control
    状态码为:200
  2. 协商缓存
    将资源一些相关信息返回服务器,让服务器判断浏览器是否能直接使用本地缓存,整个过程至少与服务器通信一次
    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?

  1. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
    Vue2.x中的响应式实现正是基于defineProperty中的descriptor,对 data 中的属性做了遍历 + 递归,为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
  2. Proxy API的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作, 这就完全可以代理所有属性,将会带来很大的性能提升和更优的代码。
    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
  3. 响应式是惰性的。
    在 Vue.js 2.x 中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行 Object.defineProperty 把每一层对象数据都变成响应式的,这无疑会有很大的性能消耗。
    在 Vue.js 3.0 中,使用 Proxy API 并不能监听到对象内部深层次的属性变化,因此它的处理方式是在 getter 中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需实现响应式,减少性能消耗。

什么是虚拟DOM

virtual DOM 虚拟DOM,用普通js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。
目的是为了减少回流和重绘,提升性能。
虚拟DOM基本步骤

  1. 页面初始加载解析DOM树,将DOM解析为JS对象
    [最终还需要将其映射成真实DOM,渲染到页面]

  2. DOM结构要发生变化,生成一个新的JS对象

  3. DIFF比较,比较同级对象

  4. 将不同之处写入到patch对象中

  5. 渲染到页面

那么为什么用虚拟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算法

vue diff算法

Diff算法步骤

  1. 用js对象结构(虚拟DOM)表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
  2. 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
  3. 把所记录的差异应用到所构建的真正的DOM树上,视图就更新了

Diff 算法: 仅在同级的vnode间做diff,递归地进行同级vnode的diff,不仅仅是同层级对比,在diff算法中也会进行同key值对比和同组件对比
Diff 过程整体策略:深度优先,同层比较

key的作用

在使用v-forj添加唯一的key的作用标识,Diff算法就可以正确的识别此节点,找到正确的位置区更新新的节点,高效的更新虚拟DOM。

vue等单页面应用及其优缺点

缺点:

优点:

一 Js

二 Vue

vue面试题很全面

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属性相互访问组件实例;
兄弟通信: eventbusVuex
跨级通信: eventbusVuexprovide / 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,唯有两点例外。

  1. 没有进行任何输入时,不会触发change
    在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。
  2. 输入后值并没有发生变更
    这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,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 [drektv] ,创建,

在单文件中创建局部指令,使用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 属性。

三 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构建流程

  1. 初始化参数,从配置文件和shell语句中读到的参数合并,得到最后的参数

  2. 开始编译:用合并得到的参数初始化complier对象,加载是所有配置的插件,执行run方法开始编译

  3. 确定入口,通过entry找到入口文件

  4. 编译模块,从入口文件出发,调用所有配置的loader对模块进行解析翻译,在找到该模块依赖的模块进行处理

  5. 完成模块编译,得到每个模块被翻译之后的最终的内容和依赖关系

  6. 输出资源,根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk,在把每个chunk转换成一个单独的文件加载到输出列表

  7. 输出完成,确定输出的路径和文件名,把内容写到文件系统中

如何利用webpack来优化前端性能

  1. 压缩代码。uglifyJsPlugin 压缩js代码, mini-css-extract-plugin 压缩css代码

  2. 利用CDN加速,将引用的静态资源修改为CDN上对应的路径,可以利用webpack对于output参数和loader的publicpath参数来修改资源路径

  3. 删除死代码(tree shaking),css需要使用Purify-CSS

  4. 提取公共代码。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); //构造函数中绑定
    }
    //然后可以

    123456

  • 使用时绑定

    1

  • 箭头函数

使用代码分割

实现按需加载,例如在点击事件之后才会执行加载

使用之前:

import OtherComponent from './OtherComponent';

使用之后:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

组件化

组件分类:逻辑业务组件,渲染组件,可复用组件

webpack

webpack优化前端性能

  1. 压缩代码。删除多余的代码、注释、简化代码的写法等等方式
  2. 利用 CDN 加速。在构建过程中,将引用的静态资源路径修改为 CDN 上对应的路径
  3. 删除死代码,将代码中永远不会走到的片段删除掉
  4. 优化图片,对于小图可以使用 base64 的方式写入文件中
  5. 按照路由拆分代码,实现按需加载,提取公共代码
  6. 给打包出来的文件名添加哈希,实现浏览器缓存文件

对css的优化使用mini-css-extract-plugin插件

对于CSS文件中包含的不必要的字符,例如注释、空白和缩进,我们可以在生产环境中将其删除,以达到减小文件大小的目的,这种技术也叫minification。而这些可以利用webpack构建工具进行实现。

optimize-css-assets-webpack-plugin插件用于优化或者压缩CSS资源

十一其他

uni-app中的坑

  1. 如果是自定义的导航栏,video是原生的video,它的层级真的是太高了,想要盖住还得使用cover-view才能盖住。

  2. picker真的是太不好用了,还不能修改文字,做中英文版本的话得用**picker-view**自定义组件或者使用插件。

  3. 当你需要将时间转化为时间戳的时候需要用到Date.parse这个方法,例如:
    2019-09-20 10:12:43这个字符串时间要转化成时间戳,你需要将-替换为/,下附代码。

    Date.parse(xxx.replace(/-/g, ‘/’)) / 1000 #xxx为字符串时间

  4. 组件内引入图片要使用绝对路径。/static/...

  5. 主页面的生命周期用onLoad代替createdonReady代替mounted。组件内使用原来的createdmounted

  6. tap事件代替click事件。

  7. 阻止事件冒泡时要在外层加一层标签<view @tap.stop="stop"></view>,直接在需要使用的方法上加.stop无效。

  8. <picker>中最好写一个<view class="style">写样式,而不是在picker上加样式。

  9. <scroll-view>中写position: fixed,在ios下会有兼容性问题。

  10. 出现遮罩后阻止页面滚动,可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=""

  11. <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) 代替
举报

相关推荐

0 条评论