前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库Vue 对象数组 prop 默认值工厂函数与实例隔离
VuVue组件与模板

Vue 对象和数组 prop 默认值为什么使用工厂函数?

工厂函数的作用是给不同组件实例创建各自的默认容器,而不是让每次渲染都生成新数据。

前端进阶之旅 · 一题精讲更新于 2026.09.06
Vue#组件与模板
先看核心答案读代码示例
理解线索

默认值需要区分三个范围

  1. 模块对象多次创建组件时可能反复使用同一引用
  2. 实例默认值工厂为当前实例创建并保留的默认结果
  3. 父层传入值调用者提供的数据,其共享关系由来源决定

独立默认容器不会赋予子组件随意修改父层数据的权限,数据流契约仍需保持清楚。

核心回答

先记住这个答案

在运行时 props 选项中,对象或数组默认值通常写成工厂函数,让每个需要默认值的组件实例获得独立容器,避免共享同一个可变引用。工厂应实际创建新对象,不能只是返回模块里的同一个对象。默认值主要在传入值为 undefined 时采用,并非每次渲染都重新执行。还要区分语法:withDefaults 的可变默认值需要注意工厂写法,Vue 3.5 响应式 props 解构中的原生默认表达式则有不同处理,不宜一概而论。

  • 默认工厂解决实例间共享引用问题,不等于深复制所有来源
  • undefined 会触发默认逻辑,null 通常表示显式传入的值
  • 运行时 default、withDefaults 和解构默认表达式不能混为一种语法

直接对象为何可能跨实例共享

组件选项定义通常会被多个实例复用。如果 default 直接指向一个对象,或者工厂返回一个模块级常量,各实例得到的仍可能是同一引用。一个实例通过嵌套修改改变这个对象,其他实例也会看到污染,问题不一定在首次展示时就暴露。

正确工厂在执行时创建新容器。下面的数组默认值会为两个独立实例分别创建数组;如果数组中还引用同一个模块级嵌套对象,隔离仍不完整。是否需要更深复制,应由数据结构和所有权决定,不能把外层新数组误当成所有内容都独立。

每个实例得到独立默认数组TypeScript
import { defineComponent, h } from 'vue';

const TagList = defineComponent({
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    return () => h('span', String(props.tags.length));
  }
});

两个没有传 tags 的 TagList 实例应得到不同数组引用。父组件若显式给两个实例传同一数组,工厂不会再替父层数据做隔离。

默认值不是每次更新都重建的状态

当 prop 的值为 undefined,包括通常的未传场景,Vue 会采用默认逻辑;显式 null 一般不会因此被替换。对象默认工厂的结果按实例保留,不能把它当作每次重新渲染都会触发的初始化钩子。需要重置编辑内容时,应设计明确的重置动作或输入变化规则。

Function 类型的 prop 还存在重要区别:默认函数可能就是要交给调用者使用的函数值,不应机械地再包一层工厂。讨论默认写法时应先确认 prop 的类型和声明方式,避免把为对象隔离提出的规则推广到所有函数。

区分三种常见默认语法

运行时 defineProps 对象声明采用 default 选项,withDefaults 则为类型式声明补充默认值,这两类场景的可变值需要注意工厂。Vue 3.5 的响应式 props 解构支持原生默认表达式,写解构默认数组时不需要再照搬同样的工厂形式。

迁移代码时先确认 Vue 与编译器版本,再检查实际使用的宏和语法。不能看见默认值里出现数组字面量就立即认定跨实例共享。除了阅读代码,还可以挂载两个实例比较引用、分别更新父层输入,验证隔离与覆盖规则是否符合组件契约。

回答前,多想一步

容易答错的地方

只要写成箭头函数就一定独立
若箭头函数返回同一个外部对象,引用仍共享。重点是每次需要实例默认值时是否创建了正确的新数据。
default 可以替换所有空值
null、空字符串和 undefined 不是同一输入,默认值并非通用的空值清洗规则。排查“Vue 对象数组 prop 默认值工厂函数与实例隔离”时还要核对输入、版本和执行顺序,并用反例确认修复后的边界。
试着用自己的话回答

面试官还会怎么问?

工厂返回浅复制对象够不够?

取决于嵌套数据是否允许共享。外层展开不会复制嵌套引用,应根据实际修改范围选择隔离策略。针对“Vue 对象数组 prop 默认值工厂函数与实例隔离”,还应保留最小复现、预期结果和失败路径,避免只凭一次现象下结论。

父层提供对象后还会用默认工厂吗?

正常提供了非 undefined 值时使用父层输入,默认工厂不负责复制或隔离这个输入。针对“Vue 对象数组 prop 默认值工厂函数与实例隔离”,还应保留最小复现、预期结果和失败路径,避免只凭一次现象下结论。

如何验证没有实例间污染?

同时挂载两个实例,检查默认容器身份和独立变化,再加入父层显式共享输入的对照场景,避免混淆两种来源。

从一道题,走向一组知识

把知识连起来

组件与模板

Vue props 为什么是单向数据流,子组件修改它会怎样?

理解数据归属与嵌套引用共享的关系

组件与模板

Vue Boolean prop 的缺省值、空字符串和 false 分别如何转换?

默认值也会改变 Boolean 的缺省语义

响应式原理

Vue 3.5 的 <script setup> 中解构 props 为什么还能保持响应式,和普通 reactive 解构有何不同?

核对 Vue 3.5 props 解构的编译范围

参考资料

  • Vue:Prop Validation 与默认值
  • Vue:类型式声明的默认值

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 直接对象为何可能跨实例共享
  3. 默认值不是每次更新都重建的状态
  4. 区分三种常见默认语法
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑