【无标题】面试题

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

@TOC面试题

vue系列

1.vue是什么

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架最早发布于2014年2月
优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开
缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长
使用场景：单页面应用程序，移动端

2.Vue核心特性

数据驱动（MVVM)
MVVM表示的是 Model-View-ViewModel

Model：模型层，负责处理业务逻辑以及和服务器端进行交互
View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

3.组件化 插件化

1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，
在Vue中每一个.vue文件都可以视为一个组件
2.组件化的优势
(1)降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，
例如输入框，可以替换为日历、时间、范围等组件作具体的实现
(2)调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，
或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
(3)提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

插件是什么
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
添加全局方法或者属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router
三、两者的区别
两者的区别主要表现在以下几个方面：

编写形式
注册形式
使用场景
注意的是：

注册插件的时候，需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件，只会注册一次

#使用场景
具体的其实在插件是什么章节已经表述了，这里在总结一下

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue的功能的增强或补充

4.Vue跟传统开发的区别

Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM

5.Vue和React对比

相同点
都有组件化思想
都支持服务器端渲染
都有Virtual DOM（虚拟dom）
数据驱动视图
都有支持native的方案：Vue的weex、React的React native
都有自己的构建工具：Vue的vue-cli、React的Create React App
#区别
数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

6.指令系统

v-text – 设置文本内容，将data数据展示到视图中 纯文本
v-html – 设置文本内容，将data数据展示到视图中 可以解析html元素
v-cloak – 解决插值页面闪烁问题
v-once – 设置文本 只执行一次
v-pre – 格式化
v-slot – 插槽
v-show – 显示隐藏元素
条件渲染指令 v-if
列表渲染指令v-for
属性绑定指令v-bind
事件绑定指令v-on
双向数据绑定指令v-model

7.列举常用的事件修饰符？列举按键修饰符？

事件修饰符
prevent 阻止默认行为（例如：阻止a 连接的跳转、阻止表单的提交等）
stop 阻止事件冒泡
capture 以捕获模式触发当前的事件处理函数
once 绑定的事件只触发1次
self 只有在event.target是当前元素自身时触发事件处理函数
passive 允许默认行为
按键修饰符
.enter 回车
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space 空格
.up 上
.down 下
.left 左
.right 右
.ctrl
.alt
.shift
键盘上的abcd等等…

8.单页应用与多页应用的区别

单页面应用（SPA）	多页面应用（MPA）

组成 一个主页面和多个页面片段 多个主页面
刷新方式 局部刷新 整页刷新
url模式 哈希模式 历史模式
SEO搜索引擎 优化 难实现， 可使用SSR方式改善 容易实现
数据传递 容易 通过url、cookie、localStorage等传递
页面切换 速度快，用户体验良好 切换加载资源，速度慢，用户体验差
维护成本 相对容易 相对复杂
#单页应用优缺点
优点：

具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不需要重新加载整个页面
良好的前后端分离，分工更明确
缺点：

不利于搜索引擎的抓取
首次渲染速度相对较慢

9.v-show与v-if理解

v-show与v-if的共同点
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示
在用法上也是相同的


不同：
v-if ： 通过操控DOM值来 实现 显示隐藏
(不适合频繁切换. 数据多不建议用if.每一次切换则重新消耗性能.乱）
v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。
v-show ：修改元素的display，实现显示隐藏
(适合频繁切换，在第一次渲染的时候已经消耗了性能)
v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS
v-show与v-if的使用场景
v-if 与 v-show 都能控制dom元素在页面的显示
v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）
如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

10.请描述下你对vue生命周期的理解

生命周期 描述
beforeCreate 组件实例被创建之初
created 组件实例已经完全创建
beforeMount 组件挂载之前
mounted 组件挂载到实例上去之后
beforeUpdate 组件数据发生变化，更新之前
updated 组件数据更新之后
beforeDestroy 组件实例销毁之前
destroyed 组件实例销毁之后
activated keep-alive 缓存的组件激活时
deactivated keep-alive 缓存的组件停用时调用
errorCaptured 捕获一个来自子孙组件的错误时被调用

每个生命周期函数的作用是什么
beforecreate：
实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:
实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：
模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：
编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：
数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：
更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：
当要销毁vue实例时，在销毁之前执行。
destroyed：
在销毁vue实例时执行。
actived
在keep-alive中使用，缓存组件激活
deactived
在keep-alive中使用，缓存组件不激活

使用场景分析

生命周期 描述
beforeCreate 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created 组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount 未执行渲染、更新，dom未创建
mounted 初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate 更新前，可用于获取更新前各种状态
updated 更新后，所有状态已是最新
beforeDestroy 销毁前，可用于一些定时器或订阅的取消
destroyed 组件已销毁，作用同上
8.第一次页面加载会触发哪几个生命周期钩子函数？
beforeCreate, created, beforeMount, mounted

11.v-if和v-for的优先级是什么

当v-if 与 v-for 一起使用时，v-for 比v-if 优先级高,如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题
所以不推荐v-if和v-for在同一个标签中同时使用。先有循环才能渲染

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

12.SPA首屏加载速度慢的怎么解决

常见的几种SPA首屏优化方式

减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR
减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化

13.为什么data属性是一个函数而不是一个对象

vue组件中data值不能为对象，因为对象是引用类型，每个组件的data都是内存的同一个地址，如果修改一个对象里面的数据，其他的也会被影响到，
data 如果是一个函数，每一个函数都有自己的局部作用域，他改变的话不会影响到其他的数据。
data在什么情况下是函数 在什么情况下是对象
1- 对象: 普通文件 .html
2- 函数: 组件中 .vue
为什么在组件中要是用 函数 ?
因为 多个组件数据交互时，可能会出现单个组件独立使用的数据，不需要被其他组件访问，且避免组件之间的冲突，或者重名 所以设置到函数中 指在当前组件生效 关闭此组件自动销毁

14.动态给vue的data添加一个新的属性时会发生什么？怎样解决

Vue.set()
Object.assign()
$forcecUpdated()

Vue.set( target, propertyName/index, value )
参数
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值

Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新应创建一个新的对象，合并原对象和混入对象的属性
this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 …})

$forceUpdate
如果你发现你自己需要在 Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事

$forceUpdate迫使Vue 实例重新渲染

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

#小结
如果为对加粗样式象添加少量的新属性，可以直接采用Vue.set()

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

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

PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

4.在vue开发时，改变数组或者对象的数据，什么情况页面视图没有更新？如何解决？
对于数组：
Vue 不能检测以下数组的变动：
1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
对于对象：
Vue 不能检测到给已有对象添加的新属性：例如：vm.obj.age= 18

解决方案：对于数组可以使用 Vue.set() 或者 vm.$set()或者splice例如Vue.set(vm.items,indexOfItem,newValue)vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
对于对象：Vue.set() 或者 vm.$set()或者splice或者 Object.assign（）
例如：

1）你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, ‘age’, 27)
2）你还可以使用 vm.$set实例方法，它只是全局Vue.set的别名：vm.$set(vm.userProfile, ‘age’, 27)
3）有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: ‘Vue Green’
})

15.Vue组件之间的通信方式都有哪些

1.父传子 父组件 v-bind
子组件 props
props - 对象【详细、简单】、数组
props:{
属性名:类型,
属性名:类型
}
props:[‘属性名’，‘属性名’]
props:{
属性名:{
type:类型，
required：必填项 true - 必填 false反之
default：默认值
}
}

2.子传父
子组件：this.$emit(“事件名”,参数) 触发事件
父组件：v-on：自定义事件名=“事件处理函数” @自定义事件名=“事件处理函数” 监听事件 绑定事件

3.任意组件 全局事件总线\vuex\pubsub
添加：
全局配置：main.js

				beforeCreate(){
					Vue.prototype.$bus=this
				}
			子组件：this.$bus.$emit("事件"，参数)触发事件
			父组件：this.$bus.$on监听事件  mounted()要写在挂载后
					this.$bus.$off("事件名") 销毁之前 销毁绑定的事件

4.依赖注入：跨代传参 可以跨代传参 也可以父子传参
依赖：provide(){return{arr:[]}}: 函数 对象 返回的的都是对象 依赖当前所在组件的属性向其他组件注入
注入：inject:[‘arr’]
5. $parent/$children/$refs $parent指的是父组件实例 $children/$refs是子组件实例
6. $attrs & $listeners
$attrs获取父组件中不被props接收的自定义属性并且可以通过v-bind="$attrs" 传入内部组件
$listeners获取父组件中的自定义事件

16.Vue是如何实现双向绑定的原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

17.$nextTick的作用与使用场景

因为vue中dom更新有延迟，所以当数据修改后 视图不能同步更新完成 这个时候就绪要等待dom更新完毕后获取新值 否则只能获取到之前的老值 想操作新值需要通过$nextTick获取新值，nextTick会在dom更新完毕后自动执行回调函数
如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

18.说说你对vue的mixin的理解，有什么应用场景

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等
我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来
在Vue中我们可以局部混入跟全局混入

使用场景
在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

19.写出vue插槽有哪些，如何使用

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。通俗的说是：slot 是在父组建控制了子组件显示或隐藏相关内容。

插槽又分为三种，1.普通插槽 2.具命插槽 3.作用域插槽
1.匿名插槽 : 父组件传递 一个html结构 给子组件
(1)子组件: 插槽默认内容
(2)父组件: <子组件> html结构
2.具名插槽 : 父组件传递 多个html结构 给子组件
(1)子组件: 给插槽添加一个name(插槽名)
插槽默认内容
(2)父组件: 使用 v-slot:插槽名 或 #插槽名
<子组件>