前端vue基础知识（必看）

5.1 Vue项⽬中有封装过axios吗？主要是封装哪⽅⾯的？

axios的 API 很友好,可直接使用，但是随着项⽬规模增⼤，如果每发起⼀次HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍,

这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下axios再使用

如何封装

1. 设置接⼝请求前缀：根据开发、测试、⽣产环境的不同，前缀需要加以区分

2. 请求头 : 来实现⼀些具体的业务，必须携带⼀些参数才可以请求(例如：会员业务)

3. 状态码: 根据接⼝返回的不同status ， 来执⾏不同的业务，这块需要和后端约定好请求⽅法：根据get 、 post 等⽅法进⾏⼀个再次封装，使⽤起来更为⽅便

   1xx：指示信息--表示请求已接收，继续处理

   2xx：成功--表示请求已被成功接收、理解、接受

   3xx：重定向--要完成请求必须进行更进一步的操作

   4xx：客户端错误--请求有语法错误或请求无法实现

   5xx：服务器端错误--服务器未能实现合法的请求

4. 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

5. 响应拦截器： 这块就是根据 后端`返回来的状态码判定执⾏不同业务7

5.3 Vue组件之间的通信⽅式都有哪些?

• 父传子

  1. 在父组件的子组件标签上绑定一个属性，挂载要传输的变量

  2. 在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"] props:{属性名:数据类型}

• 子传父

  1. 在父组件的子组件标签上自定义一个事件，然后调用需要的方法

  2. 在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的

• 兄弟组件

  1. 在src中新建一个Bus.js的文件，然后导出一个空的vue实例

  2. 在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

  3. 在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

5.4 Vue项⽬中你是如何解决跨域的呢？

• 跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

• jsonp的原理

  • ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束

• 解决方式 jsonp、代理、反向代理、a链接处理跨域、Hash(哈希)值处理跨域、cors（ajax2）处理跨域

  • 通过服务端实现代理请求转发 以express框架为例

  • 通过配置nginx 实现代理

5.5 为什么data属性是⼀个函数⽽不是⼀个对象？

1. 跟按引用传值有关。

2. Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的

3. 所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

5.6 动态给vue的data添加⼀个新的属性时会发⽣什么？怎样解决

1. 直接添加属性问题

   1. 实例化⼀个vue 实例，定义data 属性和methods ⽅法

   2. 数据虽然更新了（ console 打印出了新属性），但⻚⾯并没有更新

2. 解决方案

   1. Vue.set()

      • Vue.set( target, propertyName/index, value )

      • {Object | Array} target

      • {string | number} propertyName/index

      • {any} value

   2. Vue.set( target, propertyName/index, value )

   3. Object.assign

      • 直接使⽤Object.assign() 添加到对象的新属性不会触发更新应创建⼀个新的对象，合并原对象和混⼊对象的属行

   4. $forcesUpdated()

3. 小结

   • 如果为对象添加少量的新属性，可以直接采⽤Vue.set()

   • 如果需要为新对象添加⼤量的新属性，则通过Object.assign() 创建新对象

   • 如果你实在不知道怎么操作时，可采取$forceUpdate() 进⾏强制刷新 (不建议)

5.7你了解vue的diff算法吗？说说看?

diff算法: 基础虚拟DOM完成节点更新的方法

1. 用js对象来表示真是的DOM树结构，创建一个虚拟DOM对象

2. 当数据发生改变的时候，创建一个新的js的虚拟DOM对象

3. 比较新旧对象的差异，记录下来，最终更新到真实的DOM树结构上

5.8你有写过⾃定义指令吗？⾃定义指令的应⽤场景有哪些？

1. 实现

   1. 全局： vue.directive:{"",{}}

   2. 局部：directives:{指令名：{钩子函数}}

   3. 1. bind(){} 只调用一次，指令第一次绑定到元素时调用

      2. inserted(){} 被绑定元素插入父节点时调用

      3. update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化

      4. componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用

      5. unbind(){}只调用一次， 指令与元素解绑时调用

2. 应用场景

   1. 防抖——设置⼀个v-throttle ⾃定义指令来实现

   2. 图片懒加载——设置⼀个v-lazy ⾃定义组件

   3. 一键Copy的功能

   4. 拖拽指令、

   5. ⻚⾯⽔印、

   6. 权限校验

5.9 Vue中的过滤器了解吗？过滤器的应⽤场景有哪些？

1. 过滤器（ filter ）是输送介质管道上不可缺少的⼀种装置，把⼀些不必要的东⻄过滤掉

2. 小结

   1. ⼀个表达式可以使⽤多个过滤器。过滤器之间需要⽤管道符“|”隔开。其执⾏顺序从左往右

   2. 局部过滤器优先于全局过滤器被调⽤

3. 应⽤场景

   1. 单位转换、数字打点、⽂本格式化、时间格式化

5.10 SPA首屏加载速度慢的原因

1. 加载慢的原因

   1. 网络延时问题

   2. 资源文件体积是否过大

   3. 资源是否重复发送请求去加载了

   4. 加载脚本的时候，渲染内容堵塞了

2. 解决方案

   1. 减⼩⼊⼝⽂件积

   2. 静态资源本地缓存

   3. UI框架按需加载

   4. 图⽚资源的压缩

   5. 组件重复打包

   6. 开启GZip压缩

   7. 使⽤SSR

5.11 v-if和v-for的优先级是什么？

1. 作用

   • v-if ：指令⽤于条件性地渲染⼀块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染

   • v-for： 指令基于⼀个数组来渲染⼀个列表。 v-for 指令需要使⽤item in items形式的特殊语法，其中items是源数据数组或者对象，⽽item则是被迭代的数组元素的别名 建议设置key 并且保证每个key 值是独⼀⽆⼆的 便于diff 算法进⾏优化

2. 优先级

   • v-for 优先级⽐v-if ⾼

3. 注意事项

   • 永远不要把v-if v-for同时⽤在同⼀个元素上，带来性能⽅⾯的浪费（每次渲染都会先循环再进⾏条件判断）

   • 如果避免出现这种情况，则在外层嵌套template （⻚⾯渲染不⽣成dom 节点)，在这⼀层进⾏v-if判断，然后在内部进⾏v-for循环

   • 如果条件出现在循环内部，可通过计算属性computed 提前过滤掉那些不需要显示的项

5.12 说说你对keep-alive的理解是什么？

• keep-alive是Vue提供给我们一个内置组件，

• 作用：保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可 使用keep-alive保存列表页面的滚动位置。

• 组件使用keep-alive以后会新增两个生命周期 actived() deactived(),

• 有两个参数—— include - 包裹的组件名会被缓存,exclude 包裹的组件名都不会被缓存

5.13 你知道vue中key的原理吗？说说你对它的理解？

1. key是给每⼀个vnode的唯⼀id，也是diff的⼀种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

2. 作用

   • 在列表渲染时使用key属性

   • 使用key属性强制替换元素

   • 更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

5.14 vue生命周期

1.创建 beforeCreate created

beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created() 最早开始使用 data和methods中数据的钩子函数

2.挂载 beforeMount mounted

beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数

3.更新 beforeUpdate updated

 beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
 updated() 数据更新完成以后触发的方法，DOM节点已经更新

4.销毁 beforeDestroy destroyed

 beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
 destroyed()已经销毁完毕

5.15 说说你对vue的mixin的理解，有什么应⽤场景？

1. 理解

   • Mixin 是⾯向对象程序设计语⾔中的类，提供了⽅法的实现。其他类可以访问mixin 类的⽅法⽽不必成为其⼦类

   • Mixin 类通常作为功能模块使⽤，在需要该功能时“混⼊”，有利于代码复⽤⼜避免了多继承的复杂

   • mixin （混⼊），提供了⼀种⾮常灵活的⽅式，来分发组件中的可复⽤功能

   • 本质其实就是⼀个js 对象，它可以包含我们组件中任意功能选项，如data 、 components 、 methods 、 created 、 computed 等等

2. 使用场景

   • 我们经常会遇到在不同的组件中经常会需要⽤到⼀些相同或者相似的代码，这些代码的功能相对独⽴，这时，可以通过Vue 的mixin 功能将相同或者相似的代码提出来

mixin （混⼊）来分发 Vue 组件中的可复⽤功能

倘若有些公共组件使用频率很高，使用mixin（混入）就可以很方便地引入公用部分，

5.16 Vue中的$nextTick有什么作⽤？

效果：通过 this.$nextTick 我们可以注册一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行

为什么用？

答：Vue 中的数据更新是 延迟异步更新 的？就是说当我们修改了数据之后，页面并不会马上就更新，所以如果我们修改了数据之后，马上就获取页面中的数据，你会发现他还是原来的数据因为页面还没有更新，

使用场景之一、

• 需要在视图更新之后，基于新的视图进行操作。

• 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

5.17 vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

1. • 所谓权限控制，就是用户只能访问到被分配的资源 前端权限是请求的发起权，请求的发起可能有下面两种形式触发

     • 页面加载触发

     • 页面上的按钮点击触发 前端权限控制可以分为四个⽅⾯： 接⼝权限 按钮权限 菜单权限 路由权限

5.18 v-if和v-show有什么区别？使用场景是什么？

1. 当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制

2. v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

5.19 什么是虚拟DOM?如何实现一个虚拟DOM

虚拟dom是利用js描述元素与元素的关系。 好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能

5.20 vue3有了解过吗？能说说跟vue2的区别吗？

1. 性能提升

   • 更小巧，更快速；支持摇树优化。支持 Fragments 和跨组件渲染；支持自定义渲染器

2. .API 变动

   • 除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包 来兼容 2.x。

   • 模板语法的 99% 将保持不变。除了 scoped slot 语法可能会有一些微调之外变动最大的部分将是渲染函数 (render) 中的虚拟 DOM 的格式。

3. 重写虚拟 DOM (Virtual DOM Rewrite)

   • 随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

5.21 说说你对vuex的理解

1. 用途：实现组件之间数据的共享。

2. 为什么用：在 Vue 中我们可以通过属性和事件实现父子之间的传值，但需要一级一级的传值，如果层级较深，只通过属性和事件传值非常的麻烦，所以需要一个专门的工具来对数据进行管理，以方便的实现各层级组件之间数据的共享。

3. 组成部分：vuex 中主要有 6 部分组成：

   state：定义数据

   mutations：定义操作数据的方法，简单的操作，不能是异步的

   actions：定义操作数据的复杂的方法，比如AJAX等异步代码

   getters：先处理state中的数据，然后返回处理之后的结果，有点类似过滤器

   modules：分模块使用

   plugins：插件

5.22 说⼀下watch,methods和computed的区别

• computed 具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用

• methods 是没有缓存的，只要调用，就会执行，一般结合事件来使用

• watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作