Vue.js 源码笔记 - initState: 理解组件属性的初始化过程

2024-02-03 14:12:07

initState 函数概述

initState 函数是 Vue.js 组件初始化过程中至关重要的一个步骤，它主要负责处理组件属性的初始化工作。在 initState 函数中，Vue.js 会对组件的 props、methods、data、computed 和 watch 属性进行一系列的处理，以便在组件实例化时为这些属性分配相应的值。

initState 函数的工作流程

initState 函数的工作流程大致可以分为以下几个步骤：

初始化 props 属性： initState 函数首先会初始化组件的 props 属性。它会遍历组件的 props 选项，并为每个 prop 创建一个响应式的属性。这意味着，当 props 的值发生改变时，组件的视图也会随之更新。
初始化 methods 属性： 接下来，initState 函数会初始化组件的 methods 属性。它会遍历组件的 methods 选项，并将每个方法绑定到组件实例上。这意味着，组件中的任何地方都可以调用这些方法。
初始化 data 属性： 然后，initState 函数会初始化组件的 data 属性。它会调用 data 函数，并将返回的结果作为组件的数据对象。组件的数据对象是一个响应式的对象，这意味着，当数据对象中的属性发生改变时，组件的视图也会随之更新。
初始化 computed 属性： 接下来，initState 函数会初始化组件的 computed 属性。它会遍历组件的 computed 选项，并为每个 computed 属性创建一个 getter 函数。getter 函数会返回 computed 属性的值。computed 属性的值是根据组件的数据对象计算而来的，因此，当数据对象中的属性发生改变时，computed 属性的值也会随之更新。
初始化 watch 属性： 最后，initState 函数会初始化组件的 watch 属性。它会遍历组件的 watch 选项，并为每个 watch 属性创建一个 watcher。watcher 会监听组件数据对象中指定属性的值的变化。当被监听的属性值发生改变时，watcher 会执行相应的回调函数。