Vue源码学习：深入Props的奥秘
2023-11-25 02:55:24
- 规范化 合并配置
我们在组件化章节讲过，它主要就是处理我们定义组件的对象 option，然后挂载到组件的实例 this.$...。
我们定义组件的时候，我们会用 Vue.component() 方法，然后传入两个参数：
- 组件名
- 组件定义对象
组件定义对象中，我们可以定义各种配置项，包括 props、data、methods、computed 等。
Vue 会对这些配置项进行规范化处理，并将其合并到组件的实例中。
例如，如果我们定义了一个组件 MyComponent，并设置了 props 配置项：
Vue.component('MyComponent', {
props: ['name', 'age']
})
那么，当我们使用 MyComponent 组件的时候，我们可以通过 props 属性来传递数据：
<MyComponent name="John" age="30"></MyComponent>
在 MyComponent 组件的实例中，我们可以通过 this.name 和 this.age 来访问这些数据。
2. defineProps
defineProps() 方法的作用是将 props 配置项规范化，并将其合并到组件的实例中。
这个方法的具体实现过程如下：
- 首先，它会检查
props配置项是否是一个函数。 - 如果
props配置项是一个函数，那么它会执行这个函数，并将其返回值作为规范化后的props配置项。 - 如果
props配置项不是一个函数，那么它会直接将其作为规范化后的props配置项。
规范化后的 props 配置项是一个对象，它包含了以下属性：
type：属性的类型。required：属性是否必填。default：属性的默认值。
3. 调用 defineReactive 设置响应式对象
在 defineProps() 方法的最后，它会调用 defineReactive() 方法来将 props 配置项设置成响应式对象。
defineReactive() 方法的作用是将一个普通对象转换成响应式对象。
响应式对象的特点是，当它的属性发生变化的时候，Vue 会自动更新视图。
4. 小结
本文深入介绍了 Vue 中 Props 的设计和实现原理。
我们了解到，Props 是组件之间传递数据的桥梁，它可以帮助我们构建更加复杂的组件。
Vue 会对 Props 配置项进行规范化处理，并将其合并到组件的实例中。
Props 配置项是一个对象，它包含了以下属性：
type：属性的类型。required：属性是否必填。default：属性的默认值。
Vue 会调用 defineReactive() 方法来将 Props 配置项设置成响应式对象。
响应式对象的特点是，当它的属性发生变化的时候，Vue 会自动更新视图。
