2022前端vue面试题
这里边是比较常见的vue面试题
1.[vue-router是怎么传递参数的?
(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: ‘/detail/:id’
(2).在router-link标签中传递参数
<router-link :to={
params: {
x: 1
}
} />
获取:this.$route.params.id
2.v-if和v-for一起使用的弊端以及解决办法
v-for的优先级比v-if高,导致每循环一次就会去v-if一次,而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏,所以就会不停的去创建和销毁元素,造成页面卡顿,性能下降。
解决办法:
1.在v-for的外层包裹一个标签来使用v-if
2将需要的判断在computed里处理,然后在放到v-for里
3.beforeDestroyed里面一般进行什么操作
beforedestoryed是组件销毁之前执行的一个生命周期,在这个生命周期里,我们可以进行回调函数或定时器的清除,数据初始化等
4.vue组件传值方式
- props
- event bus
- $emit
- vuex
- storage
- provide/inject(优点是不用层层传递了)
1.事件总线:
通过其中一个 e m i t 发另一个 emit发另一个 emit发另一个on接收的方式 实现组件传值,main.js中挂载一下
Vue.prototype.$bus=new Vue() //$bus挂在同一个实例
其中一个页面$emit
//确保dom已经渲染完成
this.$nextTick(()=>{
this.$bus.$emit('my',"给父组件传值")
})
另一个页面$on
mounted(){
//vue渲染顺序,先渲染父组件--->渲染子组件
this.$bus.$on('my',params=>{
consolo.log(params)
})
}
2.provide和inject特性
在vue2.2.0 中新增provide和inject属性
使用的方式很简单:
父组件通过provide提供数据,其他组价可以使用inject注入数据
注意
不推荐直接用于应用程序代码中。一般使用的场景是自定义组件库的时候,底层组件之间需要通信的时候使用。
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
格式
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject 选项应该是:
一个字符串数组
或 一个对象,对象的 key 是本地的绑定名(自定义的一个名字),value 是:
在provide传过来的值(字符串或 Symbol),或
一个对象,该对象的:
from 属性是provide传过来的 (字符串或 Symbol)
default 属性是降级情况下使用的 value
例子:
父组件
<template>
<div>
<h1>HelloWorld</h1>
<One></One>
</div>
</template>
<script>
import One from "./One";
export default {
components: { One },
// provide: {
// form: "这是父组件的provide"
// }
provide() {
return {
form: "这是父组件的provide"
};
}
};
</script>
子组件1:
<template>
<div>
<h2>childOne组件</h2>
{{demo}}
<Two></Two>
</div>
</template>
<script>
import Two from "./Two.vue";
export default {
name: "One",
// inject: ["form"],
inject: {
form: {
default: () => ({})
}
},
data() {
return {
demo: this.form
};
},
components: {
Two
}
};
</script>
子组件2:
<template>
<div>
<h2>childtwo组件</h2>
{{demo}}
</div>
</template>
<script>
export default {
name: "Two",
// inject: ["form"],
inject: {
for: {
default: () => ({})
}
},
data() {
return {
demo: this.form
// demo: "childTwo"
};
}
};
</script>
5.vue中父组件如何获取子组件的属性和方法
在子组件上定义ref属性来获取子组件的属性和方法
代码:
// 这里是父组件
<templete>
<child ref="child"/>
</templete>
<script>
method: {
getChild () {
this.$refs.child.属性名(方法名)
}
}
</script>
6.watch和computed的区别
watch:监听数据变化,并执行一个回调函数
computed:对已有的数据进行加工,具有缓存功能,只有数据发生改时,才会重新计算
7.vue父组件和子组件生命周期的顺序
1.渲染过程顺序:
父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()
2.更新过程顺序:
父组件更新过程:
父组件beforeUpdate() -> 父组件updated()
子组件更新过程:
父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()
3.销毁过程
父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()
8.vue中父组件能监听到子组件的生命周期吗
能,通过@hook:进行监听代码如下:
// 这里是父组件
<template>
<child
@hook:mounted="getChildMounted"
/>
</template>
<script>
method: {
getChildMounted () {
// 这里可以获取到子组件mounted的信息
}
}
</script>
9.vue中的事件修饰符主要有哪些?分别是什么作用?
.stop: 阻止事件冒泡
.native: 绑定原生事件
.once: 事件只执行一次
.self:将事件绑定在自身身上,相当于阻止事件冒泡
.prevent: 阻止默认事件
.caption: 用于事件捕获
10.介绍下什么是keep-alive
keep-alive:组件缓存,只会执行一次,不会被销毁。被keep-alive包裹的组件,有activated和deactivated方法。
prop:
- include: 字符串或正则表达式。匹配的组件会被缓存。
- exclude: 字符串或正则表达式。匹配的组件都不会被缓存。
11.watch能监听到数组的pop行为吗
下面两种情况下无法监听
- 利用索引直接设置数组项时,例如arr[indexofitem]=newValue
- 修改数组的长度时,例如arr.length=newLength
12.watch如何实现深度监听
watch: {
obj: {
handler: function(val) {
},
deep: true // 深度监听
}
}
13.vue中如何解决页面不重新渲染问题?
(1)修改对象属性后,页面未重新渲染:
this.$set(对象名称, '属性名', '属性值')
(2)使用this.$forceUpdate()方法可重新渲染页面
14.什么是vuex?
vuex是全局状态管理工具,它有以下几个核心部分组成:
state:存储数据;
mutations:更新数据的方法;
actions:调用mutations方法,更新state数据;
getters:对state中的数据进行预处理;
Module: store 分割成模块
15.对于MVVM的理解?
M(数据层) V(视图层) VM(view-model)视图模型层)用来连接(数据层)(视图层)
16.vue的生命周期?
beforeCreate: 进行数据和方法的初始化;
created: 已经完成数据和方法的初始化;
beforeMount: 开始渲染dom
mounted:可以渲染dom
beforeUpdate: data中的数据即将被更新;
updated: data中的数据更新完毕;
beforeDestroy: 实例即将销毁;
destroyed:实例已被销毁;
17.vue创建组件的时候data中为什么会被return出一个对象?
防止组件与组件之间变量的局部污染
18.vue路由的几种模式?
两种:
1.hash(默认)
2.history
通过model属性切换路由模式
19.什么是路由懒加载
通过异步的方式来加载对应的路由组件,提高页面的加载速度
20.vue中有哪些内置组件?
- transtion
- transition-group
- keep-alive
- slot
- component
21.什么是SPA?
SPA是单页面应用程序,vue react angular 都是,整个项目只有一个页面
22.vue-router有哪几种导航钩子( 导航守卫 )
-
全局守卫:
beforeEach((to, from, next) => {调用next来resolve这个钩子} ),afterEach((to, from) => {} )
beforeResolve((to, from, next) => {} ),
-
路由独享守卫:
beforeEnter((to, from, next) => {} ), -
组件内部守卫:
beforeRouteEnter((to, from, next) => {next可以传回调,回调里面可以用vm访问实例} ), 内部没有this,因为路由还没confirm
beforeRouteUpdate((to, from, next) => {}),可以拿到this
beforeRouteLeave((to, from, next) => {})他们执行顺序:全局》路由》组件
23.vue-router怎么配置404页面?
{
// 会匹配所有路径
// 含有通配符的路由应该放在最后
path: '*',
name: '404',
component: () => import('../views/404.vue')
}
24. 切换路由时自动或提示保存草稿功能,如何实现?
beforeRouteLeave (to, from, next) {
if(用户已经输入信息){
//出现弹窗提醒保存草稿,或者自动后台为其保存
}else{
next(true);//用户离开
}
}
25.vue-cli生成的项目可以使用es6、es7的语法吗?为什么?
vue-cli 配置了babel,webpack打包时会将高级语法转为ES5,所以上线的时候没有问题。但是脚手架只是配置了一些默认常见的用法,像装饰器还需另做配置。 (可以根据babel官网配置一些尚在草案中的语法)
26.什么是虚拟DOM?
使用JS来模拟DOM树结构
由于每次查询DOM都会遍历整颗DOM树,相当消耗计算资源。
通过JS以对象嵌套的方式表示DOM树,每次DOM的更改就变成了JS对象属性的修改,这样就会减少性能的开销。
27.$nextTick有什么作用?
处理数据动态变化后,dom还未及时更新的问题。$nextTick就可以获取到数据更新后最新的dom变化
28.怎么捕获组件vue的错误信息?
1.errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:
1.错误对象
2.发生错误的组件实例
3.包含错误来源信息的字符串。
此钩子可以返回 false
以阻止该错误继续向上传播。
注意:只能在父组件中处理子组件的错误,没法直接在Vue的主实例中使用它。
errorCaptured(err,vm,info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
return false;
}
2.errorHandler
Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}
err:error对象
vm:Vue应用本身
info:是一个Vue特有的字符串
在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。
29.为什么vue使用异步更新组件?
批量更新,收集当前的改动一次性更新,节省diff开销
30.vue如何优化首页的加载速度?
1.路由、图片懒加载
2.DNS预解析dns-prefetch
3.CDN分发
4.按需加载三方资源
5.webpack开启gzip压缩
31.组件中写 name选项有哪些好处及作用?
1.可以通过名字找到对应的组件 ( 递归组件 )
2.可以通过name属性实现缓存功能 (keep-alive)
3.可以通过name来识别组件 (跨级组件通信时非常重要)
32.你都做过哪些Vue的性能优化?
1.编码阶段
- 尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher;
- 如果需要使用v-for给每项元素绑定事件时使用事件代理;
- SPA 页面采用keep-alive缓存组件;
- 在更多的情况下,使用v-if替代v-show;
- key保证唯一;
- 使用路由懒加载、异步组件;
- 防抖、节流;
- 第三方模块按需导入;
- 长列表滚动到可视区域动态加载;
- 图片懒加载;
2.用户体验:
- 骨架屏;
- PWA;
- 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
3.SEO优化
- 预渲染;
- 服务端渲染SSR;
4.打包优化
- 压缩代码;
- Tree Shaking/Scope Hoisting;
- 使用cdn加载第三方模块;
- 多线程打包happypack;
- splitChunks抽离公共文件;
- sourceMap优化;