1. Data
- 递归遍历
data
配置并对每一个属性做响应式处理 - 响应式处理即为该属性定义一个
dep
实例,并进行数据劫持。getter
进行依赖收集,setter
进行派发更新 - 组件
render
创建vnode
过程获取数据并触发getter
进行依赖收集 - 后续修改值时触发
setter
进行派发更新,最终触发页面更新
2. Props
- 对配置进行格式处理,统一格式便于后续操作
- 对每个
prop
进行校验、响应式处理并求值 - 父组件修改值触发父组件页面更新,
update
过程将新值赋给子组件props
最终触发子组件页面更新
props本质就是一个data,只是响应式触发由父组件传递至子组件而已
3. Computed
- 遍历
computed
配置,对每一项定义一个watcher
并进行数据劫持处理 getter
函数会先判断当前计算属性是否需要求值,需要则触发求值,不需要直接返回- 依赖收集时,计算属性所依赖的
data
会先对计算属性的watcher
进行依赖收集,然后计算属性的watcher
会触发依赖data
对渲染watcher
进行依赖收集 - 修改依赖
data
时,首先触发计算属性的更新,即重置是否需要求值的参数。再触发页面更新,更新过程会再次对计算属性求值并依赖收集
计算属性本质是具有数据劫持功能的watcher,派发更新过程只重置参数,只在触发getter后才进行求值
4. Watch
- 遍历
watcher
配置,解析出每一项的handler
回调、监听路径,并定义一个watcher
- 初始化阶段对该
watcher
进行一次求值,进行依赖收集 - 修改监听值时触发派发更新,再次执行求值过程进行依赖收集,最后调用
handler
回调
Watch属性本质就是一个Watcher,进行依赖收集和执行回调
5. v-model
- 编译阶段解析
v-model
指令,最终分解为props
属性、input
事件、和model
指令 - 在组件
update
过程创建v-model
绑定的dom
之后,执行dom
的create
钩子。依据vnode
进行dom
属性的添加,事件的绑定 - 修改
input
值后会触发编译阶段生成的input
事件,将值赋给props
属性,最终触发响应式过程