凌晨的办公室只剩下键盘声，你盯着屏幕上的 Vue 面试题汇总，眼睛发涩。投出的简历石沉大海，好不容易等来的面试，却在被问到 Vue 相关问题时结结巴巴，眼睁睁看着面试官的表情从期待变成失望。别担心，今天就来和大家聊聊 3 道 Vue 高频面试题，帮你把知识点串成串，面试时轻松应对。

一、面试官：说说 Vue 的响应式原理吧

是不是一听到这个问题，脑袋里就开始蹦 "数据劫持"" 发布订阅 "这些词，但具体怎么回事儿，又说不太清楚？咱就说，Vue 能让页面跟着数据变，靠的就是默默在背后做了不少" 小动作 "。

Vue 在创建实例的时候，会把 data 里的数据都拿出来，用Object.defineProperty给每个属性加个 "监控器"。当你读取这个数据的时候，它就偷偷记下来谁在看（收集依赖）；要是你改了数据，它就赶紧通知那些正在用这个数据的地方（触发更新）。就像你在办公室摸鱼刷手机，突然领导来了，旁边的同事会赶紧提醒你一样。

// 模拟一个简单的响应式数据处理
function reactive(obj) {
Object.keys(obj).forEach(key => {
let value = obj[key];
// 保存依赖，这里用一个简单的数组模拟
const dep = [];

Object.defineProperty(obj, key, {
get() {
// 收集当前的依赖，比如哪个Watcher在使用这个数据
dep.push(window.currentWatcher);
return value;
},
set(newVal) {
if (newVal !== value) {
value = newVal;
// 数据变化时，通知所有依赖更新
dep.forEach(watcher => watcher.update());
}
}
});
});
}

二、面试官：Vue 组件的生命周期钩子，你最常用哪个？顺序是怎样的？

还记得上周在公司茶水间，听到隔壁组小哥聊起面试，说被问到生命周期钩子顺序，当场大脑空白。其实记不住顺序也没关系，咱可以把组件的一生想象成一场闯关游戏。

组件就像一个新生儿，beforeCreate的时候，刚拿到 "准生证"，啥都没准备好；created时，已经把数据、方法都准备好了，就等着 "出生"；beforeMount是马上要把组件挂载到页面上，先在心里演练一遍；mounted就是真正 "出生" 了，能和页面上的元素互动了。更新的时候就像组件在 "成长"，beforeUpdate先知道自己要变了，updated是已经完成了蜕变。销毁的时候，beforeDestroy知道自己要 "退休" 了，赶紧做些收尾工作，destroyed就是真正 "退休" 了，啥也干不了了。

我平时最常用的就是mounted，因为这时候组件已经完全渲染好了，像发送网络请求、操作 DOM 这些事儿，在这儿做最合适。

三、面试官：Vue 组件通信有哪些方式？父子组件怎么传值？

组件之间通信，就像办公室里不同部门的同事合作，得有合适的沟通方式。常见的有 props 和 emit、自定义事件、全局事件总线、Vuex 等等。

父子组件传值是最基础的，就像领导给下属安排任务（父传子用 props），下属完成任务后向领导汇报（子传父用 emit）。父组件在模板里给子组件标签上写好 props，就像给下属布置具体的工作内容；子组件用this.$emit触发事件，就像告诉父组件 "我干完啦"，还能带上结果。

// 父组件
<template>
<div>
<ChildComponent :task="任务内容" @complete="handleComplete"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
task: '完成前端页面开发'
};
},
methods: {
handleComplete(result) {
console.log('子组件完成任务，结果是：', result);
}
}
};
</script>
// 子组件
<template>
<div>
<p>父组件给的任务：{{ task }}</p>
<button @click="finishTask">完成任务</button>
</div>
</template>
<script>
export default {
props: {
task: String
},
methods: {
finishTask() {
// 子组件向父组件发送事件，并传递结果
this.$emit('complete', '任务已完成');
}
}
};
</script>

这 3 道题在面试中出现的频率超高，把它们吃透，面试的时候就能更有底气。当然啦，Vue 的知识还有很多，需要咱们不断去学习和实践。

最后，咱们来讨论个问题：组件通信的方法这么多，在实际项目中，你觉得哪种最方便好用？是简单直接的 props 和 emit，还是功能强大的 Vuex？欢迎在评论区说说你的看法，咱们一起交流交流！