vue源码|为什么子组件传参为undefined时会取默认值

本文主要是介绍vue源码|为什么子组件传参为undefined时会取默认值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题背景

某个组件有默认值，但是我不想用默认值，便传参传了个 undefined ，发现用的还是默认值，为了一探究竟，我决定探索一下 vue 源码。

结论

vue 2，子组件 prop 传递参数值为 undefined 时，会取默认值，vue 3 如此（resolvePropValue）。

从 vue2 源码的 vue/src/core/util/props.ts 的 validateProp 中可以体现。

function validateProp() {// ......let value = propsData[key]// check default valueif (value === undefined) {value = getPropDefaultValue(vm, prop, key) // look thisconst prevShouldObserve = shouldObservetoggleObserving(true)observe(value)toggleObserving(prevShouldObserve)}// ......
}

变量 value 是传递进来的值，当 value 是 undefined，就会取默认值。

为什么这么做

因为从 JavaScript 的角度来说，null 才是空值，undefined 是未定义，可以理解为没有值，null 也是值，是空值，既然未定义那就取默认值。

参考

1. vue2源码 - props 部分 - validateProp - 当值为 undefined 时
2. Vue3 源码解读系列（十）——props/emit - 掘金
3. Vue3源码分析(6)-组件挂载之初始化props与slots - 掘金，

首发地址：https://wu-kave.github.io/2024/why-subcomponents-take-the-default-value-when-passed-undefined.html

这篇关于vue源码|为什么子组件传参为undefined时会取默认值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---