vue面试题（更新中）

逃离我推掉我的手 2022-12-20 05:40 174阅读 0赞

**1、在vue中created与activated有什么区别？**

created():在实例创建完成后被立即调用，created()只会触发一次  
activated()：是在路由设置时，才会有这个生命周期。在被 keep-alive 缓存的组件激活时调用。

**2、在vue项目中scss scoped穿透符>>>无效的解决方案有哪些**

可以使用 /deep/ 操作符( >>> 的别名)

**3、为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？**  
因为在插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致从新渲染，效率会降低  
最好是唯一 的id值。key 的作用主要是为了高效的更新虚拟DOM  
**4、使用vue如何判断页面是否编辑及编辑页面未保存离开时，给出弹窗提示**  
router.beforeEach((to, from, next) => \{  
if(from.path == “…从某个页面跳转…”) \{  
if(confirm(‘编辑内容未保存，是否离开？’)) \{  
next()  
\}else \{  
next(false)  
\}  
//1. next() 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirm的  
//2. next(’/’) 或者next(\{path:’/’\}) 跳转到一个不同的地址，当前的好行中断，然后进行一个新的导航  
//3. next(false) 中断当前的导航  
\}else \{  
next()  
\}  
\})

**5、预渲染和SSR(服务端渲染)有什么区别？**  
预渲染的使用场景更多是我们所说的静态页面的形式。

服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。

**6、v-if和v-show哪个优先级更高？if>show**  
v-if:根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会添加相应元素到DOM中，支持加在`<template>`上面  
v-show是根据表达式的值来显示或者隐藏元素，根据的是display的值  
不支持加在`<template>`标签上

**7、如何在全局使用axios的实例呢？**

在main.js中导入axios，将axios挂载到Vue的原型对象上。  
Vue.prototype.$http=axios

**8、axios同时请求多个接口，如果当token过期时，怎么取消后面的请求？**  
axios的话可以使用cancelToken来实现。如果是原生的XMLhttprequest的话，需要使用abort()方法实现。  
https://juejin.im/post/5d664634f265da03d42fb6dc

**9、你知道v-model的原理吗？说说看**

v-model是一个语法糖,真正的实现靠的还是  
v-bind:绑定响应式数据  
触发 input 事件 并传递数据 (核心和重点)

**10、 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？**  
不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三个都不能同名

**11、vue中data的属性可以和methods中的方法同名吗？为什么**？

肯定是不能同名的了  
1、vue语法就会报错，  
2、如果同名那么你在使用this.XXX的时候是调用方法还是调用变量呢

**12、怎么解决vue打包后静态资源图片失效的问题？**

找到config/index.js 配置文件，找build打包对象里的assetsPublicPath属性  
默认值为/，更改为./

**13、你知道style加scoped属性的用途和原理吗？**

在标签上绑定了自定义属性，防止css全局污染，用/deep/也可以对组件内的样式进行覆盖

**14、如何在子组件中访问父组件的实例？**  
1：直接在子组件中通过this. p a r e n t . e v e n t 来 调 用 父 组 件 的 方 法 2 ： 在 子 组 件 里 用 parent.event来调用父组件的方法 2：在子组件里用 parent.event来调用父组件的方法2：在子组件里用emit向父组件触发一个事件，父组件监听这个事件  
3：父组件把方法传入子组件中，在子组件里直接调用这个方法

注：在子组件标签上加 ref属性如ref=“baseAlert”，在父组件通过this.$refs.baseAlert.子组件方法名。

**15、watch的属性用箭头函数定义结果会怎么样？**

this为undefined，原因是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this 将是 undefined。

**16、 在.vue文件中style是必须的吗？那script是必须的吗？为什么？**  
在 .vue 文件中，template是必须的，而script与style都不是必须的。

**17、vue自定义事件中父组件怎么接收子组件的多个参数？**

this.$emit(“eventName”,data)  
data 对象或数组都可以的。

**18、说说你对vue的表单修饰符.lazy的理解**

input标签v-model用lazy修饰之后，vue并不会立即监听input Value的改变，会在input失去焦点之后，才会触发input Value的改变

**19、说说你对Object.defineProperty的理解**

Object.defineProperty定义新属性或修改原有的属性；  
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。

**20、vue组件会在什么时候下被销毁？**  
页面关闭、没有使用keep-alive时的路由切换。、v-if和改变key值

**21、在vue中使用this应该注意哪些问题**  
vue 的data避免使用箭头函数  
vue中methods中函数尽量不要使用箭头函数，会改变this指向，在vue-cli构建的项目中this会为undefined  
生命周期的钩子函数不能使用箭头函数，否者this不能指向vue实例

**22、template标签的作用**  
当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰。

**23、请描述下vue的生命周期是什么？**

生命周期就是vue从开始创建到销毁的过程，  
beforeCreate 组件创建之间  
Created 组件创建以后  
beforeMount 组件渲染之前  
Mounted 组件渲染以后  
beforeUpdate 组件更新之前  
Updated 组件更新以后  
beforeDetroy 组件摧毁之前  
Destroyed 组件摧毁以后  
Activated 组件激活 （配合keep-alive使用）  
Deactivated 组件未激活（配合keep-alive使用）

**24、 vue组件之间的通信都有哪些？**

父传子: 子组件通过props方式接受  
子传父：子组件发射一个事件 e m i t , 父 组 件 接 受 事 件 以 后 调 用 相 应 的 函 数 非 父 子 : 使 用 一 个 空 的 V u e 对 象 在 第 一 个 组 件 的 点 击 事 件 中 ， 使 用 emit,父组件接受事件以后调用相应的函数 非父子:使用一个空的Vue对象在第一个组件的点击事件中，使用 emit,父组件接受事件以后调用相应的函数非父子:使用一个空的Vue对象在第一个组件的点击事件中，使用emit方式来发射事件，在第二个组件的mounted函数里面使用$on来接收事件

**25、 什么是虚拟DOM？**  
虚拟DOM是:用JS来模拟一颗 DOM 树,放在浏览器内存中  
当你要改变时,虚拟 DOM 使用 diff 算法进行 新旧虚拟 dom 的比较，将修改了的更新到实际的 DOM 树,减少了 DOM 操作。

**26、有使用过vue吗？说说你对vue的理解**

Vue 是一套构建用户界面的渐进式框架。，通过API实现，响应的数据绑定和视图更新。

轻量级框架，Vue通过简洁的API提供高效的数据绑定和灵活的组件系统  
实现了双向数据绑定，通过MVVM思想实现数据的双向绑定  
实现了组件化、模块化开发。  
**27、SPA首屏加载速度慢的怎么解决？**  
1.通过Gzip压缩  
2.使用路由懒加载  
3.使用SSR渲染  
4.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去，减小项目打包后的大小

**28、删除数组用delete和Vue.delete有什么区别？**

delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变，不能触发vue的响应式更新。  
Vue.delete：直接删了数组成员，并改变了数组的键值，能触发vue的响应式更新。

**29、动态给vue的data添加一个新的属性时会发生什么？怎样解决？**  
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。  
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，  
然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

**30、组件和插件有什么区别？**

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。  
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

**31、说说你对选项el,template,render的理解**

el: 把当前实例挂载在元素上  
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数  
render: 不需要通过编译的可执行函数

**32、v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？**

v-for 的优先级更高  
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if渲染很少一部分元素，也需要遍历同级的所有元素。

**33、data为什么必须为函数**

是为了阻止相同vue组件之间共享数据。确保每个组件独享一个数据对象，而不是共享一个数据对象

**34、watch和 computed 的区别?**  
watch 为了监听某个响应数据的变化。没有缓存，只要从新渲染就会执行  
computed 是自动监听依赖值的变化，从而动态返回内容。可以缓存，只有当缓存改变时才执行。