在前端开发的领域中，Vue.js 是一个非常受欢迎的框架，它以其易用性和灵活性而闻名。随着 2024 年的到来，Vue.js 的面试题也在不断更新。本篇文章将总结一些高频的 Vue 面试题，并给出相关的代码示例，帮助大家更好地准备面试。
1. Vue 的生命周期是什么？
Vue 的生命周期指的是 Vue 实例从开始创建，到被完全销毁的过程。了解这些生命周期钩子非常重要，因为它们决定了组件的创建、更新和销毁时的操作。
export default {
data() {
return {
message: 'Hello Vue!'
};
},
created() {
console.log('实例已创建');
},
mounted() {
console.log('实例已挂载到DOM');
},
updated() {
console.log('数据变化时DOM已更新');
},
destroyed() {
console.log('实例已销毁');
},
};
2. Vue 组件之间是如何通信的？
Vue 组件之间的通信主要有以下几种方式：
- 父子组件通信：通过 props 和 $emit。
- 兄弟组件通信：可以通过中央事件总线或者 Vuex 实现。
- 跨级组件通信：通过 provide/inject。
父子组件通信示例
// 父组件
<template>
<div>
<ChildComponent @childEvent="handleChildEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
handleChildEvent(data) {
console.log('接收到子组件数据:', data);
}
}
};
</script>
// 子组件
<template>
<button @click="sendData">发送数据给父组件</button>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('childEvent', '这是子组件的数据');
}
}
};
</script>
3. Vue 的计算属性和侦听属性有什么区别？
计算属性和侦听属性都是 Vue 中很重要的概念。计算属性是基于其依赖进行缓存的，仅在其依赖的响应式属性发生改变时重新计算。而侦听属性用于监听数据的变化并执行异步或开销较大的操作。
计算属性示例
export default {
data() {
return {
num1: 1,
num2: 2,
};
},
computed: {
sum() {
return this.num1 + this.num2;
}
}
};
侦听属性示例
export default {
data() {
return {
count: 0,
};
},
watch: {
count(newVal, oldVal) {
console.log(`count 变化了，新的值是 ${newVal}，旧的值是 ${oldVal}`);
}
}
};
4. Vue 中的指令是什么？使用场景有哪些？
指令是 Vue.js 的一部分，它们用于在 DOM 元素上应用特定行为。常见的指令有 v-if、v-show、v-for、v-model 等等。
使用 v-if 和 v-show 的示例
<template>
<div>
<button @click="isVisible = !isVisible">切换状态</button>
<p v-if="isVisible">这是一个可见的段落</p>
<p v-show="isVisible">这个段落也可以通过 v-show 显示或隐藏</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
}
};
</script>
结论
了解 Vue 的生命周期、组件间通信、计算属性与侦听属性的区别以及常用指令的使用方式，能够帮助开发者更好地把握 Vue 的核心理念和应用。在准备面试时，熟悉这些高频面试题和代码示例，将对你通过面试大有帮助。希望这篇文章能为你带来一些启发，祝你在 2024 年的前端面试中取得好成绩！
