vue 的面试题

一、Html篇
1、常用的块级元素及行内元素有哪些？
块级元素：div、p、h1~h6、ol、ul、li、table、form
行内标签：a、span、img、input、lable、button
行内块元素：img、input、button
2、行内元素和块级元素的区别？
块级元素：默认换行，独占一行，可设置宽高 (宽度是父容器的100%)，块级元素可以嵌套任意元素，块级文字不能放入其他块级元素。
行内元素：默认不换行，设置宽高无效 (默认宽度是本身内容宽度)，不能包含块级元素，只能包含文本或者其它行内元素，设置 margin，padding 上下无效。
行内块元素：综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距。
转换：display:block，display:inline，display:inline-block。
3、标签上title与alt属性有什么区别？
alt 是给搜索引擎识别，在图像无法显示时的替代文本。
title 是元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
4、H5新特性
语义化标签：
<header>    定义文档的头部区域
<nav>    定义导航链接
<article>    内容标签
<section>    定义文档某个区域
<aside>    侧边栏标签
<footer>    定义了文档的尾部区域
<figure>    规定独立的流内容（图像、图表、照片、代码等）
<figcaption>    定义 <figure> 元素的标题

音频视频：<audio> 、<video>
画布：<canvas>
SVG 绘图
地理位置
WebStorage （本地存储：LocalStorage / SessionStorage ）
二、Css篇 
1、css3的新特性 
选择器：层级选择器，属性选择器，状态伪类选择器，结构伪类选择器，伪元素选择器
文本效果：文本阴影 ，文本自动换行，文本溢出，（单词拆分，文本拆分）
边框：圆角边框 border-radius，边框阴影 box-shadow，边框图片 border-image
背景：渐变背景，多重背景 (设定背景图像的尺寸，指定背景图像的位置区域，背景的绘制)
透明度：opacity （ 取值0-1，通常用于做元素的遮罩效果）
高斯模糊：filter
渐变：background: linear-gradient (线性渐变，径向渐变 ，文字渐变)
过渡：transition
2D转换 / 3D转换： transform
动画：Animation （@keyframes 动画帧）
媒体查询：@media
弹性布局 （flex）
1、如何让css只在当前组件中起作用
在当前组件的<style>修改为<style scoped>

想要改变ui框架原有样式scss可以用/deep/或::v-deep

2、组件样式中的scoped有什么作用
 作用：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

三、Vue篇
1、mvvm 框架是什么？
vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。 

2、vue2与vue3之间的区别
生命周期：Vue2 可直接调用生命周期钩子；Vue3 使用时需先引入
多根节点：Vue2 报错；Vue3 支持
打包优化：Vue3 比 Vue2 轻量化【Vue2 中，全局API暴露在Vue实例上，即使未使用，也无法消除；Vue3 中针对全局和内部的API进行了重构】
响应式原理：Vue2是Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的；Vue3是Proxy API对数据代理
API 构成：Vue2 选项API【一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置】；Vue3 组合式API【可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案】
TypeScript：Vue2 不支持ts，Vue3 支持
3、生命周期
共分为8个阶段 ：创建前/后，挂载前/后，更新前/后，销毁前/后

【vue3 中 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，不需要去定义】

4、第一次页面加载会触发哪几个钩子
beforeCreate，created，beforeMount，mounted

5、vue获取数据在哪个周期函数
一般 created / beforeMount / mounted 皆可

如果你要操作 DOM ，那肯定是 mounted 时候才能操作

6、简述每个周期具体适合哪些场景
beforeCreate：在new一个Vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。

create：data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作data中的数据，最早可以在这个阶段中操作。

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在这个阶段中进行。

beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步。

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的。

beforeDestroy：Vue实例从运行阶段进入了销毁阶段，这个时候所有的 data 和 methods，指令，过滤器…都是处于可用状态。还没有真正被销毁。

destroyed：这个时候所有的 data 和 methods，指令，过滤器…都是处于不可用状态。组件已经被销毁了。

7、v-show 和 v-if 指令的共同点和不同点
共同点：都能控制元素的显示和隐藏

不同点：v-show 是通过修改元素的display的CSS属性让其显示或者隐藏； v-if 是直接销毁和重建DOM达到让元素显示和隐藏的效果

（使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理）

8、v-if 与 v-for 的优先级
vue2：v-for 优先级高于 v-if

vue3：v-if 优先级高于 v-for（除此之外v-for和v-if在同一标签中使用也会报错，解决办法可以在外面套一个template标签）

9、$nextTick 是什么？为什么优先解决微任务？
当你修改了data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值，你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。

$nextTick中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

主要思路就是采用微任务优先的方式调用异步方法去行$nextTick包装的方法。

10、vue组件间的参数传递
1）父组件传给子组件：子组件通过props方法接受数据

2）子组件传给父组件：$emit方法传递参数

3）非父子组件间的数据传递，兄弟组件传值借用eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。发送数据使用 $emit方法，使用 $on 接收

4）vuex 通用

11、vuex是什么？怎么使用？哪种功能场景使用它？
1）是什么
vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，登录状态、音乐播放、加入购物车等
2）属性：
State、 Getter、Mutation 、Action、 Module
○ State
state是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，
Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
需要通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。
○ Getter
getters 可以对State进行计算操作，在多个组件间复用
○ Mutation 、Action
Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
○ Module
Vuex允许我们将store分隔成模块（module），每个模块拥有自己的state，mutation，action，getter，甚至是嵌套子模块
3）使用场景
一句话，不要为了使用vuex而去使用vuex，推荐组件间数据复用，记录登录及其它状态值数据，一些需要缓存的数据使用vuex都能达到很好的管理

12、vue常用的修饰符
表单修饰符

1)lazy（当光标离开标签时，才会将值赋值给value）

2)trim（过滤掉两边的空格）

3)number（自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值）

事件修饰符

1)stop//stop阻止事件的冒泡，相当于调用了event.preventPropagation方法

2)prevent//preven阻止了事件的默认行为，相当于调用了event.preventDefault方法

3)self//只当在 event.target 是当前元素自身时触发处理函数

4)once//绑定了事件以后只能触发一次，第二次就不会触发

5)capture//capture事件捕获，从顶层往下触发

6)passive//passive用于提升移动端scroll事件的性能。在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

7)native//native如果在自定义组件标签上绑定原生事件，则需要加上.native

13、v-model的使用
v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind 绑定一个 value 属性；v-on 指令给当前元素绑定 input 事件。

14、vue中双向数据绑定是如何实现的
v-model 通过数据劫持和观察者模式实现

15、vue常用的指令
v-once、v-show、v-if、v-else、v-else-if、v-for、v-html、v-text、v-bind、v-on、v-model指令等

16、说出至少4种vue当中的指令和它的用法
v-if、v-show：显示与隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：数据双向绑定

17、vue.js的两个核心是什么
数据驱动、组件系统

18、页面刷新vuex被清空解决办法
localStorage 存储到本地再回去
重新获取接口获取数据
19、vue2的双向数据绑定原理
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

20、性能优化有哪些方法
合理使用v-if和v-show：v-if适用于在条件满足时渲染整个元素，而v-show适用于频繁切换元素的显示和隐藏。
避免不必要的重新渲染：使用key属性来唯一标识列表项或组件，避免不必要的重新渲染。
组件懒加载：将页面中不可见或初始不需要的组件进行懒加载，以提高初始加载速度。
合理使用异步更新机制：通过使用Vue.$nextTick()方法，将DOM操作推迟到下一个DOM更新循环中，以避免不必要的重渲染。【eg：当修改了Vue实例中的数据后，Vue会将这些变化缓冲起来，然后异步更新真正的DOM。而Vue.$nextTick()方法就是为了在DOM更新循环结束之后执行某个回调函数】
路由懒加载：将路由的组件进行懒加载，按需加载所需的代码，以提高初始加载速度。
使用事件修饰符：使用Vue提供的事件修饰符（如.stop、.prevent、.capture等）来避免不必要的事件冒泡和默认行为。
避免过多的全局组件和深层嵌套：合理设计组件结构，避免过多的全局组件和过深的组件嵌套，以减少不必要的性能开销。 
21、<keep-alive></keep-alive> 的作用是什么？
keep-alive 是 vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

22、为什么使用key? 
使用 key 来给每个节点做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。 

23、分别简述computed和watch的使用场景 
computed : 当一个属性受多个属性影响的时候就需要用到 computed ，最典型的栗子：购物车商品结算的时候

watch : 当一条数据影响多条数据的时候就需要用 watch ，栗子：搜索数据

24、请说出vue.cli项目中src目录每个文件夹和文件的用法？ 
assets 文件夹是放静态资源；components 是放组件；router 是定义路由相关的配置;  app.vue 是一个应用主组件；main.js 是入口文件。 

25、vue组件中data为什么必须是一个函数？ 
因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象。组建中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data ，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data ，这样改一个全都改了。 

26、如何获取dom? 
 ref="domName" 用法：this.$refs.domName

27、assets和static的区别
相同点：assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下。

不相同点：assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议： 将项目中 template需要的样式文件js文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

四、路由篇 
1、vue的路由实现：hash模式 和 history模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面
history模式：history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更
2、vue路由传参数
使用query方法传入的参数使用this.$route.query接受
使用params方式传入的参数使用this.$route.params接受
3、$route和$router的区别
$route是“路由信息”对象，包括path，params，hash，query，fullPath，matched，name等路由信息参数
$router是“路由实例”对象，包括路由的跳转方法，钩子函数等（想要导航到不同的url，则使用 $router.push方法）
4、Vue-router跳转和location.href有什么区别
使用 location.href='/url' 来跳转，简单方便，但刷新了页面；使用 history.pushState('/url') ，无刷新页面，静态跳转；引进 router ，然后使用 router.push('/url') 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。其实使用 router 跳转和使用 history.pushState() 没什么差别的，因为vue-router就是用了 history.pushState() ，尤其是在history模式下。 

五、javaScript篇
1、ajax、axios、fetch之间的区别
ajax：实现了局部数据刷新，本身是针对MVC的编程，多用于jquery项目，不符合现在前端MVVM的浪潮。

axios：基于ajax封装，为MVVM框架而生 (vue react)，支持 Promise API，支持并发请求。

fetch：ajax在es6的替代品，fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象；兼容性差。

2、var，let，const三者的区别
变量提升：var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined；let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错。
块级作用域：var不存在块级作用域；let和const存在块级作用域。
重复声明：var允许重复声明变量；let和const在同一作用域不允许重复声明变量。
修改声明的变量：var和let可以；const声明一个只读的常量。一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。
3、防抖与节流
防抖：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

通俗理解，就是我们在点击请求或者点击加载等过程中，只需要点击一次，但由于请求慢，点击了好多次，导致多次请求，防抖就是在点击了好多次之后的最后一次才会请求。

在一些搜索框输入内容时，会有好多联想词在下方显示出来，并不是输入框内容一改变就触随即弹出联想词的，是我们结束输入后，经过一段时间，才会触发。

节流：
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

在某应用购买火车票/飞机票等商品的时候，不断地点击刷新购买，总不能一直点击一直请求吧，系统会崩掉的，所以节流就很有必要了。

区别：
防抖是将多次执行变为最后一次执行；节流是将多次执行变成每隔一段时间执行。

4、单页面应用和多页面应用区别及优缺点 
单页面（SPA）：通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA）：就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多

原文链接：

vue_面试题（持续更新中）_vue面试题-CSDN博客