面试：面试题

 

vue的内置组件有哪些

1）component

2）transition

3）transition-group

4）keep-alive

5）slot

axios请求前拦截和请求后拦截说一下

// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

作用域插槽有什么作用

浏览器网页加载的顺序重排跟重绘

页面加载流程：

1.浏览器输入网址，DNS解析成ip地址
2.进行三次握手
3.浏览器发出请求，服务器进行响应，最后获取到html文件
4.浏览器开始解析html文件
5.浏览器从上至下解析文件代码，遇到link后向服务器进行数据请求，
6.之后在继续向下解析，载入部分html代码后配合css文件进行渲染
7.遇到图片之后，发出图片请求，不等反应又继续解析
8.等到图片响应之后，回过来重新渲染图片以及其之后的内容
9.遇到script标签则直接加载运行其中的内容
10.如果js中执行了一些dom操作，则对指定位置的所有内容重新进行渲染。
11.直到所有代码执行完毕，页面元素渲染完毕，网页才算加载完成。

重排与重绘：

浏览器将html页面渲染完毕之后会生成Dom树和渲染树。
重排必定触发重绘
重绘不一定会触发重排，如：颜色变化

wx小程序的开发发布流程是什么样的？

上传代码，成功后去官网的开发管理中提交审核

vue-router 复用，导致路由参数失效怎么办？

watch监听

vue3的特性有哪些？

1. 性能提升：Vue3.0 使用了重写的响应式系统，使得响应式数据的获取和更新速度更快，同时也减少了内存使用量。

2.Composition API：Vue3.0 引入了 Composition API，它是一种基于函数的 API，可以让开发者更好地组织组件逻辑，并且更容易地重用代码。

3.TypeScript 支持：Vue3.0 支持 TypeScript，可以提供更好的类型检查和编译时类型检查。

4.更好的 TypeScript 集成：Vue3.0 中的组件和 API 都是使用 TypeScript 编写的，这意味着可以更好地集成 TypeScript，从而提高了开发效率和代码可维护性。

5.更好的 Tree-Shaking：Vue3.0 的代码被重构为更小、更专注的模块，这使得 Tree-Shaking 更加有效，可以减少项目的打包大小。

虚拟dom的实现原理是什么？

虚拟DOM就是用来模拟DOM结构的一个js对象。

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；

diff 算法 — 比较两棵虚拟 DOM 树的差异；

patch 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

虚拟dom的优缺点？

优点：

• 保证性能下限： 它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
• 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们更新视图，极大提高我们的开发效率；
• 跨平台： DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

• 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。
  首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

1. 组件类库中的按钮，表单等，如果要修改样式但是不生效，怎么办？

在控制台源代码中找到类名 然后在前面添加 /deep/

2. 为什么vue中data设置为函数而不是对象？

如果 data 是一个对象，则所有组件都将共享同一个数据对象，这可能会导致不同组件之间的数据冲突。而将 data 设置为一个函数时，每个组件都会返回一个新的数据对象，从而避免了数据共享的问题，也保证了组件之间数据的独立性，从而支持组件的复用。

3. 为什么不建议v-if和vfor一起使用？

v-for的执行优先比v-if要高，一起使用会造成性能浪费

4. es6常用特性

变量声明：let，const

箭头函数：箭头函数最直观的三个特点：

①不需要 function 关键字来创建函数

②省略 return 关键字

③没有this，可以继承当前父执行上下文的 this 关键字

函数的参数默认值：可以在函数传参的（）里定义

for...of , for...in :

for...of 用于遍历一个迭代器，如数组,for...in 用来遍历对象中的属性

map，forEach

5. 解释什么是promise

Promise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject

promise相当于一个状态机

promise的三种状态

• pending
• fulfilled
• rejected

1.promise 对象初始化状态为 pending
2.当调用resolve(成功)，会由pending => fulfilled
3.当调用reject(失败)，会由pending => rejected

then方法：

promise.then((value) => {}, (error) => {})   可接收两个回调函数作为参数；第一个回调是Promise对象状态变为resolved时调用，第二个回调是状态变为rejected时调用；这俩函数都是可选的。

catch方法：

Promise.all([p1, p2, p3])：

都成功才会成功，有一个失败就会变成rejected

Promise.race()  ：

哪个最快就返回哪个的结果，不管别的执没执行完成

6. 路由传参的方式

(7条消息) Vue：路由传参的三种方式_vue路由传参_杨 戬的博客-CSDN博客

7. typeof和instanceof的区别

1. typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值

2. instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

3. 而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

8.  防抖节流

 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

节流：指定时间间隔内只会执行一次任务。

9. 前端代码优化

网络优化：使用缓存，多个域名，避免图片的src为空（因为仍然会向服务器发送请求）

页面渲染优化： 降低css选择器复杂度，避免使用css表达式，使用字体图片icon图代替图片图标

js中的性能优化： 使用computed缓存计算结果，使用事件委托，对事件防抖和节流。减少动画

webpack打包，压缩代码

10. 怎么使watch在进入页面时执行

immediate设为true    监听方法会在创建的时候  执行handler里的方法

11. 路由守卫

1：全局钩子： beforeEach、 afterEach
2：独享守卫（单个路由里面的钩子）： beforeEnter、 beforeLeave
3：组件内守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫：

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

每个守卫方法接收三个参数

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

12. 组件递归

• 1.如果某个组件通过组件名称引用它自己，这种情况就是递归组件；

• 2.实际开发中类似Tree、Menu这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景；

• 3.使用递归组件时，由于我们并未也不能在组件内部导入它自己，所以需要设置组件name属性，用来查找组件定义，如果使用SFC，则可以通过SFC文件名推断。组件内部通常也要有递归结束条件，比如model.children 这样的判断；

• 4.查看生成的渲染函数可知，递归组件查找时会传递一个布尔值给resolveComponent，这样实际获取的组件就是当前组件本身；

13.  会改变原数组和不会改变原数组的方法

1、会更新原数组的方法：
a.arr.push()往数组的最后一个位置追加元素
b.arr.unshift()往数组的第一个位置追加元素
c.arr.pop()移除数组的最后一个元素，并返回被删除的元素
d.arr.shift()移除数组的第一个元素，并返回被删除的元素
e.arr.splice()移除数组某个位置的元素，可以移除多个
f.arr.reverse()数组翻转，返回新数组，会影响原数组
g.arr,sort()数组排序，返回新数组，会影响原数组
2.不会更新元素的方法：
a.arr.slice()切割数组，返回新数组，不会对原始数组造成影响
b.arr.concat()实现数组的拼接，返回新数组，不影响原数组
c.arr.filter()过滤数组，遍历所有元素，会根据某个条件对数组进行过滤，最终返回一个新数组，不会影响原数组
d.arr.map() 根据原数组，遍历所有元素，返回一个新的数组，但是数组元素结构 可能发生变化，但不更新原数组

14. 组件传值

vue 组件中如何传值并且监听 - 掘金 (juejin.cn)

15. 路由守卫