前端vue常见60道面试题重点简洁！！！【未完，文章持续更新中......】

1.MVVM的理解

model代表数据模型，数据和业务逻辑都在model层中定义view代表视图，负责数据展示view
model代表与界面对应的model
MVVM是MVC的变种进阶，在概念上真正将页面与数据逻辑分离的模式，把数据绑定放到一个js中去实现，这个js文件主要功能是完成数据的双向绑定，把model绑定到UI元素上

2.单页面应用和多页面应用的优缺点

单页面应用（SPA），通俗一点说就是指只有一个页面，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，vue是单页面应用。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

优点：

用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
前后端分离，比如vue项目
完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。
不利于SEO优化，单页页面，数据在前端渲染，就意味着没有SEO。
页面导航不可用，如果一定要导航需要自行实现前进、后退

3.v-if和v-for可以一起使用吗？为什么

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for循环中。
所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

4.keep-alive是什么

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

作用：

保存我们路由切换时组件的状态

例如：

列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用

keep-alive

保存列表页面的滚动位置。

组件使用keep-alive以后会新增两个生命周期 actived()``````deactived(), 有两个参数 include -
包裹的组件名会被缓存 exclude 包裹的组件名都不会被缓存

5.解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象或数组中取出,赋值给其他变量。

6.什么是虚拟dom

虚拟dom是利用js描述元素与元素的关系，用js对象来表示真实的DOM树结构，创建一个虚拟DOM对象

7. vue是什么以及vue的优点

vue是渐进式的前端框架
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
双向数据绑定
组件化开发
视图，数据，结构分离
虚拟DOM
运行速度更快

8.v-modal的语法原理

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

v-bind

绑定一个

value

属性；

v-on

指令给当前元素绑定

input

事件。

9.说一下从输入 URL 到页面加载完中间发生了什么?

DNS 解析
TCP 连接
发送 HTTP 请求
服务器处理请求并返回需要的数据
浏览器解析渲染页面
连接结束

10.vue3.0 与 vue2.0 的区别

性能的提升 更加的小巧,更快速
API变动 模板中99%将保持不变
重写虚拟DOM 减少运行时的开销
选项api变成了组合api和选项api的组合

11.prop 验证，和默认值

props:会接收不同的数据类型，常用的数据类型的设置默认值的写法
Number, String, Boolean, Array, Function, Object
prop 数据单项传递，父不影响子，子不影响父
不能再组件中直接修改prop传递的值，Vue会发出警告

12.vue中key 的作用

在列表渲染时使用key属性
使用key属性强制替换元素
更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

13.vue常用修饰符

.stop 阻止事件冒泡
.capture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转
.once 事件只能触发一次
.native 触发js原生的事件
.number 把文本框的内容转换为数字
.trim 去除文本框左右空格
.keyup.enter
.keyup.space

14.vue中methods,computed,watch的区别

methods用于组件的封装,逻辑处理
computed是vue中独有的计算属性,computed可以缓存,methods不能缓存
watch是监听data和计算属性中新旧变化的

15.vue双向数据绑定原理

结合发布者-订阅者模式结合es6的proxy的set和get方法实现数据劫持,进一步结合watcher的update方法实现数据的双向绑定

16.Axios 拦截做过哪些

拦截器

axios

发送出去请求或者数据响应回来之前进行数据的拦截或者过滤
主要有请求拦截器请求发送出去之前拦截
响应拦截器数据响应回来后触发

比如页面

loading

效果结合拦截器+

vuex

完成

17.请写出在vue中使用promise封装项目api接口的思路

我们在原有的目录基础上在与

src

同级新建

api

与

utils

文件夹，

utils

里新建

request.js

文件，

request.js

在

request.js

中做了三件事

创建 axios，设置 baseURL 与超时时间
拦截请求
拦截响应
路由拦截

18.promise 是什么？有哪些状态和参数？

概念：

Promise

对象代表一个异步操作, 它表示一个在未来完成的异步操作

promise

有三个状态
有三种状态:

pending

(进行中)\

fulfilled

(已成功)`rejected

(已失败) 状态改变只有两种情况:

pending

==>

fulfilled

||

pending

==>

rejected

参数

promise

有两个参数

resolve

||

reject` 是两个回调函数

19.什么是跨域，以及jsonp的原理?

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

jsonp

的原理:

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

20.vuex中五大核心以及作用？

state:存放变量的
getters:计算属性,计算变量的值
mutations:修改state的状态$store.commit()
action:异步操作组件中用$store.dispath()
modules:用来拆分模块的

21.es6有哪些拓展

新增了块级作用域
提供了定义类的语法糖
新增了一种基本数据类型
对象和数组新增了扩展运算符
新增了模块化
ES6 新增了Set和 Map 数据结构

22.在vue3中解释一下组合api的含义？

将与同一个逻辑关注点相关的代码配置在一起，无论是数据，和函数都在同一个模块，而不是像

vue

2一样，使用

data

和

methods

把变量和方法分开，尽快他们是处理同一个业务逻辑的。

23.说一说，你是怎么理解setup的？

新的

setup

组件选项在创建组件之前执行，一旦

props

被解析，就作为组合式

API

的入口点。
由于在执行

setup

时，组件实例尚未被创建，因此在

setup

选项中没有

this

。这意味着，除了

props

之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

24.ref和reative 的区别？

ref

数据响应式监听。

ref

函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式

Ref

对象，该对象中的值一旦被改变和访问，都会被跟踪到。

reactive

是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式

Ref

对象数据了一般配合

torefs

使用

25.在vue3中没有原型，我们一般怎么挂在公用的方法写出代码？

const app =createApp(App);consttest=()=>{
  console.log('我是测试函数触发的');return'测试成功！';};
app.config.globalProperties.$Test = test;

在vue3 中怎么使用，挂载的公用方法 $Test ?import{ getCurrentInstance }from'vue';setup(){// getCurrentInstance() 获取当前组件实例const{ proxy }=getCurrentInstance();
  proxy.$Test(); 就可以调用这个方法；

}

26.watchEffect和 watch 有什么区别？

watchEffect

并不需要传入具体的监听对象。但是他也同样监听不到非

ref

类型，和

getter

函数的变化。

watch API

与选项式

API

this.$watch

(以及相应的

watch

选项) 完全等效

27.watch 监听 ref声明的值和reactive声明的值有什么区别，写出代码对比？

setup(){const count =ref(0);watch(count,(newVal, oldVal)=>{})}setup(){const data =reactive({num:0});watch(()=> data.num,(newVal, oldVal)=>{})}

28.路由导航守卫有几种?

1.全局路由守卫

全局前置守卫

beforeEach

, 全局后置守卫

afterEach()

2.组件路由守卫

beforeRouteEnter

在路由进入之前，组件实例还未渲染;

beforeRouteUpdate

同一页面，刷新不同数据时调用;

beforeRouteLeave

离开当前路由页面时调用;

3.路由独享守卫

beforeEnter

29.vue2和vue3 中路由导航守卫不同点？

路由守卫（

vue-router4.0

中将

next

取消了，可写可不写，

return false

取消导航，

undefined

或者是

return true

验证导航通过）

30.vuex的辅助函数都有哪些？

mapState

state

;

mapGetters

getters

;

mapMutations

mutations

;

mapActions

actions

;

31.vue2 和 vue3 生命周期对比？

1、

beforeCreate

-> 使用

setup()

2、

created

-> 使用

 setup()

3、

beforeMount

onBeforeMount

4、

mounted

onMounted

5、

beforeUpdate

onBeforeUpdate

6、

updated

onUpdated

7、

beforeDestroy

onBeforeUnmount

8、

destroyed

 onUnmounted

9、

errorCaptured

onErrorCaptured

32.什么是指令？

在

vue

中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以

v-xxx

表示类似于html页面中的属性

<div v-xxx ></div>

33.指令的作用是什么呢？

指令中封装了一些

DOM

行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关

DOM

操作的绑定

34.vue中常用的v-指令有那些呢？

v-text

元素的

InnerText

属性,必须是双标签

v-html

元素的

innerHTML

v-if

判断是否插入这个元素

v-else-if

v-else

v-show

隐藏元素如果确定要隐藏, 会给元素的

style

加上

display:none

v-model

对于输入框实现数据的双向绑定

35.vue3 中自定义指令的钩子函数有那些？

created

元素创建后，但是属性和事件还没有生效时调用。

beforeMount

仅调用一次，当指令第一次绑定元素的时候。

mounted

元素被插入父元素时调用.

beforeUpdate

: 在元素自己更新之前调用

updated

元素或者子元素更新之后调用.

beforeUnmount

: 元素卸载前调用.

unmounted

-当指令卸载后调用，仅调用一次

36.Vue2 和 vue3 插槽的区别？

Vue3

（其实从2.6开始）中引入了一个新的指令

v-slot

，用来表示具名插槽和默认插槽。
在 v2.5 之后屏蔽了

slot-scope

v-slot

引入使其插槽更接近指令化。

37.router-link tag 和 v-solt 区别并写出代码？

1.在

vue-router4.0

之前，我们都是使用

tag

来自定义

router-link

渲染成什么标签
2.在

vue-router4.x

之后废弃了

tag

有了

v-solt

概念
3.

<router-link custom to="/catcan" v-slot="{ href,route,isActive,navigate,isExactActive}"><li @click="navigate">我是路由自定义标签</li></router-link>

38.说出 v-slot=“{ href,route,isActive,navigate,isExactActive}” 的每一个属性的含义？

href

就是解析后的

url

route

就是解析后的规范的

route

对象

navigate

导航的触发函数

isActive

是否匹配的状态

isExactActive

是否精准匹配的状态

39.v-if 和 v-show 有什么区别？

v-show

仅仅控制元素的显示方式，将

display

属性在

block

和

none

来回切换；而

v-if

会控制这个

DOM

节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用

v-show

会更加节省性能上的开销；当只需要一次显示或隐藏时，使用

v-if

更加合理。

40.vue 路由传参数如何实现

主要通过

query

和

params

来实现

```
query 
```
传参：通过在
```
 router-link
```
或
```
this.router.push()
```
传递通过
```
this.router.push()
```
传递通过
```
this.route.query.id 
```
来接收
优点：通用性比较好，刷新数据不会丢失
```
params 
```
传参：通过在
```
 router-link
```
或
```
this.router.push()
```
传递，通过
```
this.router.push()
```
传递，通过
```
this.route.params.id
```
来接收
优点：传递数据量在，优雅

41.父传子怎么实现？

父传子：父组件给子组件一个事件,子组件通过

props

[‘自定义属性名’]

42.子传父怎么实现？

子传父:父组件给子组件一个事件,子组件调用这个事件,并通过

this.$emit

（‘事件名’,要传递的值）来传

43.兄弟组件传值怎么实现？

兄弟组件:定义一个空的

bus

，通过

bus.$emit

（‘自定义的事件名’，要传的值),通过

bue.$on

来接收

44.Vue3双向数据绑定原理？

结合发布者-订阅者模式结合

es6

的

proxy

的

set

和

get

方法实现数据劫持,进一步结合

watcher

的

update

方法实现数据的双向绑定

45.如何优化SPA应用的首屏加载速度慢的问题？

1.将公用的

JS

库通过

script

标签外部引入，减小

app.bundel

的大小，让浏览器并行下载资源文件，提高下载速度；
2.在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小

app.bundel

的体积，在调用某个组件时再加载对应的

js

文件；
3.加一个首屏

loading

图，提升用户体验；

46.Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Options Api

包含一个描述组件选项（

data

、

methods

、

props

等）的对象

options

；

API

开发复杂组件，同一个功能逻辑的代码被拆分到不同选项；
使用

mixin

重用公用代码，也有问题：命名冲突，数据来源不清晰；

composition Api

vue3

新增的一组 api，它是基于函数的

api

，可以更灵活的组织组件的逻辑。
解决

options api

在大型项目中，

options api

不好拆分和重用的问题。

47.Proxy 相对于 Object.defineProperty 有哪些优点？

可以监听数组变化
可以劫持整个对象
操作时不是对原对象操作,是

new Proxy

返回的一个新对象
可以劫持的操作有 13 种

48.Vue 3.0 在编译方面有哪些优化？

vue.js

3.x中标记和提升所有的静态节点，

diff

的时候只需要对比动态节点内容；

Fragments

（升级

vetur

插件):

template

中不需要唯一根节点，可以直接放文本或者同级标签
静态提升(

hoistStatic

),当使用

hoistStatic

时,所有静态的节点都被提升到

render

方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。

patch flag

, 在动态标签末尾加上相应的标记,只能带

patchFlag

的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟

dom

diff

的性能。
缓存事件处理函数

cacheHandler

,避免每次触发都要重新生成全新的

function

去更新之前的函数

tree shaking

通过摇树优化核心库体积,减少不必要的代码量

49.为什么data是一个函数？

根实例对象

data

可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
如果不是一个函数，每个组件实例的

data

都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的

data

更改，所有的

data

一起改变，如果

data

是一个函数，每个实例的data都在闭包中，就不会各自影响了。

50.为什么v-for使用key

key

是给每一个

vnode

的唯一

id

，也是

diff

的一种优化策略，可以根据

key

，更准确，更快的找到对应的

vnode

节点

未完，文章持续更新中…

标签：前端 vue.js javascript

本文转载自: https://blog.csdn.net/weixin_72667634/article/details/130344929
版权归原作者 吃宵叶. 所有，如有侵权，请联系我们删除。

前端vue常见60道面试题 重点简洁！！！【未完，文章持续更新中......】

目录