Vue.js 面试题

Mon, 01 Jan 0001 00:00:00 +0000

共 123 道 Vue.js 面试题。答案默认折叠，便于先自行作答。

1. 为何`setup()`中直接解构`props`会丢失响应性？

难度：2 · 类型：QA

题目要点

setup 中直接解构 props 会丢失响应性，是因为解构会把属性值拷贝为普通变量，打断了与 props Proxy 的引用关系，导致 Vue 无法进行依赖收集。正确做法是直接使用 props.xxx，或通过 toRefs / toRef 将属性转换为保持响应性的 ref。

参考答案

在 Vue 3 中，setup() 里直接解构 props 会丢失响应性，根本原因在于：响应式是依赖引用关系实现的，而解构会打断这种引用关系。

下面从原理、示例和正确做法三个层面说明。

一、根本原因：解构会“拷贝值”，不再是响应式引用

在 setup(props) 中：

props 本身是一个 浅只读的响应式对象（Proxy）
Vue 的响应式系统是 基于 getter / setter（Proxy 拦截）+ 依赖收集 实现的
解构会把属性的当前值“取出来”，赋值给一个普通变量

一旦解构：

const { title } = props;

此时：

title 是一个 普通变量
它不再通过 props.title 访问
Vue 无法拦截 title 的读取
依赖收集链路断裂 → 响应性丢失

二、对比示例：为什么一个会更新，一个不会

❌ 错误示例（丢失响应性）

export default {
 props: {
 title: String
 },
 setup(props) {
 const { title } = props;

 return { title };
 }
};

父组件更新 title 时：