博主:_LJaXi Or 東方幻想郷
专栏: 前端面试题
开发工具:Vs Code
本题针对
Vue2
这些几乎把常用的都包括了,问别的就没意思了,毕竟工作拧螺丝嘛
我都好久不用Vue了,不过用了React再回看Vue感觉好简单啊…
其实工作上都很快能捡起来,就是面试问题可能是必须的,接着往下看吧
0. 自我介绍
面试官您好,我叫 ***,今年 ** 岁
目前在前端领域上有一定的工作经验,之前在 ** 公司 以及 ** 公司就职web前端 / 后端工程师
主要负责的项目有 *** 项目,*** 项目
主要负责了**模块开发
我的兴趣爱好是写博客,喜欢把自己工作遇到的问题或一些知识记录在博客中充实自己 | (根据自己的实际情况介绍爱好)闲暇之余也会 *******
今天来到贵公司面试深感荣幸,希望今后能与大家一起共事,自我介绍完毕,谢谢!
1. Vue中父子传值操作
父传子
或子传父
我们项目中常用到这两个功能,注意,父传子
传递数据为单向数据流传输,由props
接收子传父
即是使用自定义事件实现的数据回调,这两个数据流是不同的
父传子
App.vue 父组件
<template>
<div id="app">
<HelloWorld msg="我是父组件传过来的值,用props接收~"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
HelloWorld.vue 子组件
<template>
<div class="hello">
{{ msg }}: props: { msg: String }
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
父传子: 我们在父组件中引入子组件,然后通过子组件标签定义一个用于子组件可接收的变量
msg
= “我们要传递的值
”
然后再子组件中使用props
接收父组件中传递过来的变量,这就是父传子,可传递任意参数
子传父
HelloWorld.vue 子组件
<template>
<div class="hello">
<button @click="sonGiveFatherValue">传递数据给父组件</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
sonGiveFatherValue() {
const data = '我是传递给父组件的一个字符串'
this.$emit('shuju', data)
}
}
}
</script>
App.vue 父组件
<template>
<div id="app">
<HelloWorld @shuju="childData"/>
<div>接收子组件的数据: {{fatherOfChildValue}}</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data() {
return {
fatherOfChildValue: ''
}
},
components: {
HelloWorld
},
methods: {
childData(val) {
this.fatherOfChildValue = val;
}
}
}
</script>
子传父: 是不是顺序颠倒了,子传父,便于理解,先看子组件
举个例子,比如我们需要在父组件中添加一个按钮,但是点开按钮就是一个弹窗,这时候我们就可以把这个弹窗封装为一个子组件,正是因为封装,所以才会有的数据传输hhhh…题外话
:Vue可是很好用的,至少比React的单向数据流好…
不闲扯,聊回正题,首先看
HelloWorld组件
我们需要把一个值,由子组件使用事件传递给父组件,注意点击事件下的this.$emit(传递的事件名,传递的值)
然后我们在父组件中的子组件标签中使用它
@shuju="childData"
这就是绑定一个自定义事件,然后事件参数就是你传递过来的那个值
主要看这两行你就能理解
<HelloWorld @shuju="childData"/>
<script>
childData(val) {
this.fatherOfChildValue = val;
}
</script>
2. 回顾那些Vue生命周期钩子函数
像我这种过目即忘但是会写的人,回顾面试题确实是有些痛苦的…
beforeCreate
在实例初始化之前调用,此时组件的选项还未初始化
created
在实例创建完成后调用,
此时已经完成数据观测、属性和方法的运算
,但尚未生成真实的 DOM 并完成挂载
beforeMount
在组件挂载之前调用,此时已经生成了真实的 DOM,
但尚未挂载到页面中
mounted
在组件挂载完成后调用,
此时组件已经被渲染到页面中
beforeUpdate
在数据变化导致重新渲染之前调用,
此时页面尚未重新渲染
updated
在数据变化导致重新渲染之后调用,
此时页面已经重新渲染完成
beforeUnmount (2.x版本中为beforeDestroy)
在组件实例销毁之前调用,
此时组件尚未被销毁
unmounted (2.x版本中为destroyed)
在组件实例销毁后调用,
此时组件已经被销毁
3. Vue中的computed和watch之间的区别
computed是计算属性,是基于已有的属性计算得出的新属性,只要依赖的属性不发生变化,计算结果也不会变化。watch是观察者,用来监听数据的变化,当数据发生变化时,执行相应的操作
computed
示例
<template>
<div>
<h2>计算属性示例</h2>
<input v-model="firstNumber" type="number" placeholder="输入第一个数">
<input v-model="secondNumber" type="number" placeholder="输入第二个数">
<p>两数之和: {{ sum }}</p>
<p>两数之差: {{ difference }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstNumber: 0,
secondNumber: 0
};
},
computed: {
sum() {
return parseInt(this.firstNumber) + parseInt(this.secondNumber);
},
difference() {
return parseInt(this.firstNumber) - parseInt(this.secondNumber);
}
}
};
</script>
watch
示例
<template>
<div>
<h2>监听数据示例</h2>
<input v-model="message" type="text" placeholder="输入消息">
<p>消息长度: {{ messageLength }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
messageLength: 0
};
},
watch: {
message(newMessage) {
// newMessage 为新的消息值
this.messageLength = newMessage.length;
}
}
};
</script>
4. Vue的路由有几种模式,介绍作用
Vue的路由有2种模式:hash模式、history模式
hash
在hash模式下,URL中的路径会以#符号开始,这种模式在旧版浏览器中很常见。它通过监听URL中hash值的变化来实现路由切换
// 在路由配置中使用hash模式
const router = new VueRouter({
mode: 'hash',
routes: [
// 路由配置
]
})
history
history模式:
在history模式下,URL中的路径不包含#符号,看起来更加直观和美观。它使用HTML5的history API来实现路由切换
// 在路由配置中使用history模式
const router = new VueRouter({
mode: 'history',
routes: [
// 路由配置
]
})
5. 路由传参 params 和 query 的区别
params
参数是用于传递动态路由参数的,即在路由路径中定义的参数,如/user/:id
中的id
使用params
传递参数时,参数会被编码到URL中,例如:/user/1
query
参数则是用于传递查询参数的,它会被附加在URL的末尾以查询字符串的形式,如/user? id=1
使用query
传递参数时,参数会以键值对的形式拼接在URL后面。
params参数可以在路由组件中通过 r o u t e . p a r a m s 来获取,而 q u e r y 参数可以通过 route.params来获取,而query参数可以通过 route.params来获取,而query参数可以通过route.query来获取
编程式 params
data:{
username: ''
},
login() {
...
this.$router.push({
name: 'home', //注意使用 params 时一定不能使用 path
params: { username: this.username },
})
}
声明式
<router-link :to="{ name: 'home', params: { username: username } }">
编程式 query
data:{
username: ''
},
login() {
...
this.$router.push({
path: '/home',
query: { username: this.username },
})
}
声明式
<router-link :to="{ path: '/home', query: { username: username } }">
6. Vue 路由的 $route 和 $router 各自有什么作用 / 区别
router
用来访问 Vue 中的路由实例,可以进行路由跳转和路由信息的获取。route
用来访问当前路由的信息,包括路由路径、参数、查询等。
7. Vue的自定义指令
Vue 自定义指令 ✨ 博主: pingting_
8. Vue 中 Vuex 的作用 / 里面分别有什么是做什么的
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
调试工具:vue devtools (Vue开发工具)
Vuex就像眼镜:您自会知道什么时候需要它。
详看我的这篇博客: Vuex 状态管理 ✨
9. Vue 中 Mixins 的作用 / 怎么使用
当使用Vue框架时,mixins提供了一种机制,可以在多个组件之间共享可重用的逻辑
通过使用mixins,可以将特定的属性、方法、计算属性、钩子函数等混合到多个组件中,从而实现代码的复用和组件的扩展。
在
src
目录下创建一个mixins
文件夹,文件夹下新建自己要定义的混入对象js
文件。使用对象的形式来定义混入对象,在对象中可定义与vue组件一样的data、components、created、methods 、computed、watch
等属性,并通过export
导出该对象.
export const pageMixin = {
data() {
return {
page: { // 分页信息
pageNo: 1, // 当前页
limit: 10, // 每页行数
total: 0, // 列表总数量
},
tableList: [], // 列表数据
loading: false, // 加载列表数据的Loading
PAGE_SIZES: [5, 10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数
LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
}
},
methods: {
// 查询列表数据
queryList() {},
// 修改当前页
handleCurrentChange(pageNo) {
this.page.pageNo = pageNo;
this.queryList();
},
// 修改每页行数
handleSizeChange(limit) {
this.page.pageNo = 1;
this.page.limit = limit;
this.queryList();
},
},
}
mixin的使用
在需要调用的组件页面中引入 pageMixin.js
文件
import {pageMixin} from "@/mixins/pageMixin"
export default {
mixins: [ pageMixin ],
data() {
return {
}
}
}
10. 讲解一下 MVVM
Modal(模型) - View(视图) - ViewModal(视图模型)
视图
与模型层
分离,并引入中间层视图模型
在MVVM模式中,视图通过数据绑定方式与视图模型进行通信。这意味着当视图模型中的数据发生变化时,视图会自动进行更新好处:
实现代码的可维护性、灵活性和可重用性,尤其在构建大型、复杂的用户界面时非常有用
11. 何时使用keep-alive?为什么,有什么作用?
在前端开发中,Vue.js提供了一个特殊的组件
<keep-alive>
,用于在组件树中缓存组件的实例,以便在切换组件时保留其状态。我们可以使用<keep-alive>
来优化性能,减少不必要的组件销毁和重建操作
12. v-show 与 v-if 的区别
v-show
通过css display
控制显示和隐藏,v-if
组件真正的渲染和销毁,而不是显示和隐藏,频繁切换状态使用v-show
否则v-if
13. 为何v-for要用key???
快速查找到节点,减少渲染次数,提升渲染性能
14. 请列举出Vue中一些指令,以及相对应的用法
v-html //html
v-text //元素里要显示的内容
v-bind:data //绑定动态数据 :data
v-on:click //绑定事件 @click
v-for
v-if //条件渲染指令
v-model //双向绑定,用于表单
15. Vue 中的 修饰符 有哪些???
以下为常用的 Vue 修饰符
.prevent
阻止默认行为,即调用事件的 event.preventDefault() 方法。常用于阻止表单提交或链接跳转等默认行为。
.stop
停止事件冒泡,即调用事件的 event.stopPropagation() 方法。当一个元素上触发了某个事件时,该事件会向上冒泡,影响到父元素中相同类型的事件。使用 .stop 修饰符可以阻止事件继续向上冒泡。
.capture
使用事件捕获模式,即在捕获阶段触发事件,而不是在冒泡阶段。默认情况下,事件是在冒泡阶段触发的。
.self
只有当事件是由当前元素本身触发时才会触发事件处理程序。当事件在当前元素之外的子元素中触发时,事件处理程序不会被调用。
.once
只触发一次事件处理程序,即事件处理程序只会执行一次,之后就会被移除。文章来源:https://www.toymoban.com/news/detail-591985.html
.passive
指示监听器永远不会调用 event.preventDefault()。这个修饰符用于提高页面滚动的性能。但要注意,一旦对同一个事件同时使用了 .passive 和 .prevent 修饰符,.prevent 将会被忽略。文章来源地址https://www.toymoban.com/news/detail-591985.html
到了这里,关于【Vue 面试题10道】我好像之前想过要写,不过之前JavaScript面试题比较多,就暂时略过了,这些应该几乎把常问的都包括了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!