必知!2022年Vue面试常见问题大揭秘
最编程
2024-08-02 22:35:30
...
面试题:Vue2.x 生命周期
1. 有哪些生命周期
系统自带:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2. 一旦进入到页面或者组件,会执行哪些生命周期,顺序。
beforeCreate
created
beforeMount
mounted
3. 在哪个阶段有$el,在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
activated、deactivated
5. 如果加入了keep-alive,第一次进入组件会执行哪些生命?
beforeCreate
created
beforeMount
mounted
activated
6. 如果加入了keep-alive,第二次或者第N次进入组件会执行哪些生命周期?
只执行一个生命周期:activated
面试题:谈谈你对keep-alive的了解
1. 是什么
vue系统自带的一个组件,功能:是来缓存组件的。===》提升性能
2. 使用场景
就是来缓存组件,提升项目的性能。具体实现比如:首页进入到详情页,如果用户在首页每次点击都是相同的,那么详情页就没必要请求N次了,直接缓存起来就可以了,当然如果点击的不是同一个,那么就直接请求。
面试题:v-if和v-show区别
1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block
2. 使用场景不同
初次加载v-if要比v-show好,页面不会做加载盒子
频繁切换v-show要比v-if好,创建和删除的开销太大了,显示和隐藏开销较小
面试题:v-if和v-for优先级
v-for的优先级要比v-if高
***是在源码中体现的:function genElement
面试题:ref是什么?
来获取dom的
面试题:nextTick是什么?
获取更新后的dom内容
面试题:scoped原理
1. 作用:让样式在本组件中生效,不影响其他组件。
2. 原理:给节点新增自定义属性,然后css根据属性选择器添加样式。
面试题:Vue中如何做样式穿透
stylus样式穿透使用:>>>
sass和less使用:/deep/
通用使用: :v-deep
面试题:Vue组件传值
父组件-->子组件:
1. 父组件:
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}
2. 在子组件中使用props(可以是数组也可以是对象)接收即可。可以传多个属性。
export default {
props: ['myName']
}
子组件-->父组件:
1. 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack')
}
}
}
2. 父组件
<child @handleChange="changeName"></child>
methods: {
changeName(name) {
this.name = name
}
}
兄弟组件之间:bus.js
面试题:computed、methods、watch有什么区别?
1. computed vs methods区别
computed是有缓存的
methods没有缓存
2. computed vs watch区别
watch是监听,数据或者路由发生了改变才可以响应(执行)
computed计算某一个属性的改变,如果某一个值改变了,计算属性会监听到进行返回
watch是当前监听到数据改变了,才会执行内部代码
面试题:props和data优先级谁高?
props ===> methods ===> data ===> computed ===>watch
面试题:Vuex有哪些属性?
state、getters、mutations、actions、modules
state 类似于组件中data,存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分,让仓库更好管理
面试题:Vuex是单向数据流还是双向数据流?
Vuex是单向数据流
面试题:Vuex中的mutaitons和actions区别
mutaitons : 都是同步事物
actions : 可以包含任意异步操作
***在调试中就看出来
面试题:Vuex如何做持久化存储
Vuex本身不是持久化存储
1. 使用localStorage自己写
2. 使用vuex-persist插件
面试题:Vue设置代理
module.exports = {
publicPath:'./',
devServer: {
proxy: 'http://localhost:3000'
}
}
面试题:Vue项目打包上线
1. 自测==>修改路由模式
2. 代理不生效,使用ENV
3. 修改路径
面试题:Vue路由模式
路由模式有俩种:history、hash
区别:
1. 表现形态不同
history:https://xuexiluxian.cn/about
hash:https://xuexiluxian.cn/#/about
2. 跳转请求
history : https://xuexiluxian.cn/id ===>发送请求
hash : 不会发送请求
3. 打包后前端自测要使用hash,如果使用history会出现空白页
面试题:介绍一下SPA以及SPA有什么缺点
SPA是什么?单页面应用
缺点:
1. SEO优化不好
2. 性能不是特别好
面试题:Vue路径传值
1. 显式
http://localhost:8080/about?a=1
1.1 传:this.$router.push({
path:'/about',
query:{
a:1
}
})
1.2 接:this.$route.query.a
2. 隐式
http://localhost:8080/about
2.1 传:this.$router.push({
name:'About',
params:{
a:1
}
})
2.2 接:this.$route.params.a
面试题:路由导航守卫有哪些
全局、路由独享、组件内
1. 全局
beforeEach、beforeResolve、afterEach
2. 路由独享
beforeEnter
3. 组件内
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用场景:判断是否登录,如果登录就next否则就跳转到登录页面