Vue · 八股文高频版

1 Vue 核心概念

data、props、computed、methods、watch 的区别？

data：组件内部数据，响应式。
props：父组件传入，只读。
computed：依赖响应式数据自动计算，有缓存。
methods：普通函数，每次调用都执行。
watch：侦听指定数据变化，执行副作用。

// Vue 2 示例
new Vue({
  data() {
    return { counter: 0 };
  },
  computed: {
    doubleCounter() {
      return this.counter * 2;
    }
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  },
  watch: {
    counter(newValue, oldValue) {
      console.log(`计数器从 ${oldValue} 变为 ${newValue}`);
    }
  }
});

Vue 2 和 Vue 3 的响应式原理区别？Object.defineProperty vs Proxy

Vue 2：用 Object.defineProperty 劫持对象属性，get/set 拦截。无法检测新增属性、数组下标变化；需深度遍历；$set 补救。
Vue 3：用 Proxy 劫持整个对象，可拦截增删改、数组操作，性能更好，无 IE 支持。

Proxy 优势：① 劫持整个对象，新增属性无需特殊处理 ② 能观察更多类型（数组索引、Map/Set）③ 性能更好。

// Vue 3 伪代码
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key);
    }
  });
}

Vue 生命周期钩子有哪些？

创建：beforeCreate → created（实例已创建，可访问 data）
挂载：beforeMount → mounted（DOM 已挂载）
更新：beforeUpdate → updated
销毁：beforeUnmount → unmounted（Vue 3）或 beforeDestroy → destroyed（Vue 2）

Composition API 中：onMounted、onUpdated、onUnmounted 等。

Composition API 和 Options API 的区别？setup 语法糖？

Options API：按选项（data、methods、computed）组织，逻辑分散。
Composition API：按逻辑关注点组织，setup 中组合 ref、reactive、computed、watch，逻辑复用更灵活。

<script setup> 是编译时语法糖，顶级变量自动暴露给模板，无需 return。

// 使用 script setup
const count = ref(0);
const increment = () => { count.value++; };
// 自动暴露给模板，无需 return

2 组件通信

父子组件通信：props 和 $emit

父传子：props，子组件声明接收。
子传父：$emit 触发自定义事件，父组件 @事件名 监听。

// 父组件
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />

// 子组件
props: { message: { type: String, required: true } }
this.$emit('childEvent', 'Data from Child');

兄弟组件通信：事件总线、父组件中转

事件总线：new Vue() 作为 EventBus，$emit / $on 跨组件通信。
父组件中转：子 A 通过 emit 传给父，父再通过 props 传给子 B。

// event-bus.js
export const EventBus = new Vue();

// ChildA: EventBus.$emit('dataSent', 'Data from ChildA');
// ChildB: EventBus.$on('dataSent', (data) => { ... });

跨层级：provide / inject、refs、Vuex

provide/inject：祖先 provide，后代 inject，适合主题、配置等。
refs：父组件 ref 获取子实例，调用其方法或访问数据。
Vuex：全局状态，任意组件访问。

// 祖先 provide
provide() { return { sharedData: 'Data from GrandParent' }; }

// 后代 inject
inject: ['sharedData']

// refs 调用子组件方法
this.$refs.child.someChildMethod();

3 Vuex

Vuex 核心概念：state、mutations、actions、getters

state：全局状态。
mutations：同步修改 state 的唯一方式，通过 commit 触发。
actions：异步操作，通过 dispatch 触发，内部用 commit 改 state。
getters：派生状态，类似计算属性。

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++; }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

commit 和 dispatch 的区别？为什么要区分？

commit：同步提交 mutation，直接改 state。
dispatch：触发 action，处理异步，完成后 commit mutation 改 state。

区分原因：① 职责分离：mutations 只做同步更新 ② 可追踪性：同步 mutation 便于 DevTools 时光旅行 ③ 简单同步操作直接 commit 更简洁。

Vuex 如何保证数据可追踪性和不可变性？

可追踪：强制通过 mutation 修改，DevTools 可记录每次变更。
严格模式：strict: true 禁止在 mutation 外直接改 state。
不可变性：Vuex 不自动保证，可配合深拷贝、Immutable.js、Object.freeze 实现。

// 深拷贝保证不可变
mutations: {
  updateUser(state, newUserData) {
    state.user = { ...state.user, ...newUserData };
  }
}

4 Vue vs React

设计理念：Vue 完整方案 vs React UI 库

Vue：完整框架，官方生态（Vuex、Vue Router），易上手，适合中小型项目。
React：专注 UI 层，需搭配 Redux、React Router 等，更灵活，适合大型项目。

模板 vs JSX、Composition API vs Hooks

模板 vs JSX：Vue 用 HTML-like 模板 + 指令（v-if、v-for），React 用 JSX，逻辑更灵活。
Composition API vs Hooks：都支持逻辑复用。Vue setup 只执行一次，自动收集依赖；React Hooks 每次渲染都执行，需手动依赖数组，有闭包陷阱。

Vue 组合式函数无需 useMemo/useCallback，响应式系统自动优化；React 需注意依赖数组和引用稳定。

双向绑定 vs 单向数据流

Vue：v-model 双向绑定，表单开发便捷。
React：单向数据流，受控组件需手动绑定 value + onChange。

Vuex vs Redux

Vuex：与 Vue 响应式集成，mutations 同步、actions 异步，可直接改 state。
Redux：强调不可变性，纯函数 reducer，dispatch action 返回新 state。