1. Promise 的理解
promise是为了解决异步回调地狱(回调地狱:回调函数嵌套回调函数的意思)的一种状态机,共有三种状态,pending等待中,fulfilled成功,reject失败.
promise的优点:
1)不受外界影响,只由pending-fulfilled状态改变或者只由 pending-reject状态改变,且状态不可逆
2)promise支持链式.then()写法
3)promise.all(),
promise的缺点:
1) 无法取消Promise,一旦新建它就会立即执行，无法中途取消
2) 如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
2.箭头函数和普通函数的区别
1).箭头函数没有this指向,只能通过作用域链寻找this属性
2).箭头函数不支持apply(),call(),bind(),改变this指向的方法
3).箭头函数没有原型,不支持arguments,不能构造函数
3.Call(), bind(), apply()的区别
1).apply()方法接受两个参数,第一个参数是this指向,第二个参数是数组,当第一个参数为undefind,null时,默认指向windows,apply()方法会立即执行且临时执行一次
2).call()方法接受两个参数,第一个参数是this指向,第二个参数是参数列表,当第一个参数为undefind,null时,默认指向windows,apply()方法会立即执行且临时执行一次
3).bind()方法接受两个参数,第一个参数是this指向,第二个参数是参数列表(与call()方法不同的是此参数列表可多次传入),bind()方法不会立即执行而是返回一个永久改变this指向的函数
4.防抖和节流
1).防抖:是指函数在n秒内只执行一次,如果n秒内又触发了此事件,则会重新计算
2).节流:是指函数在n秒内只执行一次,执行过程中不会被打断
5.闭包
补充: 作用域,作用域链
作用域:作用域定义变量的使用范围,分为局部作用域和全局作用域
作用域链: 作用链的是从内向外查找变量的过程，可以站在局部作用域去调用全局作用域的属性，反过来是不允许的。
1)概念:函数嵌套函数,函数内部可以使用函数外部定义的变量
示例如下所示:
fn1(){
let a = 9999;
fn2() {
alert(n);
}2).优点:闭包可以避免全部变量污染,延长变量的生命周期,变量可以不被垃圾回收机制回收
3).缺点:闭包会造成内存泄漏,影响网页性能
6.深浅拷贝
深拷贝和浅拷贝只针对Object和Array引用数据类型的
浅拷贝:只复制对象或者数组的地址值,新旧对象共用同一个内存
深拷贝:重新拷贝对象或者数组的地址值,新旧对象不共用同一个内存,新对象改变不影响旧对象的数据
7.Vuex状态管理模式
Vue属性:vuex一共有5种属性分别是,state,mutation,getter,action,module
1.state:是仓库的数据源管理库类似于vue中的data函数,项目中使用this.$store.state.属性获取
2.mutation:是直接改变state属性状态值方法,项目中使用this.$store.commit('state',value)改变
3.getter: 可以对State进行计算操作，它就是Store的计算属性
4.action: 异步请求接口数据通过thia.$store.commit('mutation',value)向mutation中传值,在项目中使用this.$store.dispatch('postSApi')调用action中接口方法
5.module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
import { post } from '@/api/business.js'
export default {
state: {
dataObject: { }
},
mutations: {
// 向state里传值
setSystemPattern(state, data) { state.dataObject= data },
},
getters: {},
actions: {
postApi ({ commit }) {
return new Promise(reslove => {
post().then(res => {
if (res.code == 200) {
// 向mutations里传值
commit('setSystemPattern', res.data)
}
reslove()
})
})
}
}
}8.vue响应式原理
vue实现响应式主要是订阅者模式,主要由Observer数据劫持,Compile解析模板更新,Watcher是Observer和Compile的中间桥梁订阅Observer数据变化实现Compile视图更新,三者相互配合.vue是MVVM框架,既modal,view,viewModal,在响应式系统中给data的每一个属性都创建一个新的订阅者模式,modal数据变化时就通过getter,setter监听数据变化实现view视图更新.
9.data为什么是一个函数
一个组件可能在很多地方使用，也就是会创建很多个实例，如果data是一个对象的话，对象是引用类型，一个实例修改了data会影响到其他实例，所以data必须使用函数，为每一个实例创建一个属于自己的data，使其同一个组件的不同实例互不影响。
10.VUE的6种事件修饰符
1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素才触发事件
6.passive：事件的默认行为立即执行，无需等待事件回避执行完毕
11.输入一个URL到页面过程中发生了什么
1.在地址栏输入一个url链接
2.通过DNS解析该域名下的ip
3.跟服务端建立tcp链接
4.向服务端发送http请求
5.关闭tcp链接,解析html内容并渲染出来
12.vue路由的两种模式
1.hash模式
特点:在url地址上有#号
实现的原理:原生的hasChange事件来实现,来监听hash值的变化
window.onhaschange=function(){}
刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合
2.history模式
特点:在url地址上没有#号,比较与hash模式看起来好看一些
实现的原理:利用的是history的api 来实现的 popState() 来实现的
刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决
13.事件冒泡与事件捕获原理
1.事件捕获：触及的事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个节点，并在这些节点上触发捕获事件，直至到达事件的目标节点。是由外到内层
2.事件冒泡：与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。由内到外
14.请描述一下 cookies sessionStorage和localstorage区别
相同点：都存储在客户端
不同点：
1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
4.sessionStorage,localStorage方法
存储:window.sessionStorage.setItem('方法名',val值)
读取:window.sessionStorage.getItem('方法名',val值)
删除:window.sessionStorage.removeItem('方法名')
清空所有数据:window.sessionStorage.clear()
15.diff算法
1. vue的diff算法是从两侧向中间节点去对比的。并且使用了双指针，边对比边更新。而react的diff算法是从左到右去对比的，对比时把改变的节点生成patch树，对比完才去打补丁。
2. diff算法一般要指定节点key，也就是唯一值，这样才能在节点进行删除或者排序操作后，保证diff对比的准确性。
3. vue3的diff算法相比vue2做了优化，它会在编译阶段判断每个节点是否是动态节点，通过看节点上有没有像v-on，:class等这种符号，然后收集动态节点生成block tree，在dom发生变化时，只会去比对block tree。因为vue3对静态节点做了静态提升，所以静态节点只会渲染一次。
4. vue3的diff算法还再用了patchFlag标记动态节点，更高效的判断修改了哪些东西。
16.loader和plugin的区别
1.loader主要用于转换某些类型的模块，它是一个转换器和加载器。
2.plugin是插件，它是对webpack本身的扩展，是一个扩展器
17.什么是内存泄漏
概念:内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
哪些操作会造成内存泄漏？
1.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
2.闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
18.HTTP的请求方式
1.get请求:对应select查找数据,请求地址无加密处理,请求参数直接拼在请求地址后面,
2.post请求:对应update更新数据,请求参数在请求体里发送
3.put请求:对应创建或更新数据
4.delect:对应删除数据
19.画一条0.5px的直线
height: 1px;
transform: scale(0.5)20.说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页> 面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 > HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
---优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
---缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一> 加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所> 有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
21.怎样理解 Vue 的单向数据流？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
22.vue模板如何编译
Vue的模板编译就是将“HTML”模板编译成render函数的过程。这个过程大致可以分成三个阶段：
1.解析阶段：将“HTML”模板解析成AST语法树；
2.核心 parseHTML( template ,{}) Vue定义了很多匹配HTML的正则表达式 ,parseHTML根据正则匹配
3.parseHTML是解析模板字符串的“主线程”，它的第一个参数是要解析的模板字符串， 也就是单文件组件中最外层 所包裹的部分；第二个参数是一个选项对象，它会包含一些回调，以及一些配置项。
23.vue3新增特性
1.响应性能提升:
响应性能提升,由vue2.0的Object.defineProperty改为Es6的Proxy使其更新速度更快,比如vue2.0之前针对对象和数组等对象的更新是不能自动更新到试图的,是需要结合$set()方法实现试图更新,vue3.0的Proxy实现了深度监听从而可以达到实时更新的效果
2.更好的支持typeScript
3.新增Composition Api比原有的Mixin混淆更强大,它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强。
3.新增组件:
-
Fragment 不再限制 template 只有一个根几点。
-
Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。
-
Supense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。
4.Tree-shaking：支持摇树优化
摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快。
24.vue3 组合式API生命周期钩子函数有变化吗？
1.setup()函数取代了beforeCreate()和created(),
| vue2.0选项式API生命周期 | vue3.0组合式API生命周期 |
| beforeCreate | 无 |
| created | 无 |
| beforeMounte | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdate |
| beforeDestroy | onBeforeDestroy |
| destroy | onDestroy |
| activated(缓存生命周期) | onActivated |
25.watch 和 watchEffect 的区别？
watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：
-
watch 需要传入监听的数据源，而 watchEffect 可以自动手机数据源作为依赖。
-
watch 可以访问倒改变之前和之后的值，watchEffect 只能获取改变后的值。文章来源：https://www.toymoban.com/news/detail-487495.html
-
watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。文章来源地址https://www.toymoban.com/news/detail-487495.html
26.
到了这里，关于面试题20230616的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
