vue源码解析之props原理

前言

最近会陆续的对vue进行源码分析，一系列课程如下：

state系列

1. props原理
2. methods原理
3. data原理
4. computed原理

方法执行时机

在beforeCreate之后，created之前，会initState

initState中会调用initProps

源码分析

initProps

上面代码主要做了三件事：

1. 遍历props
2. 给props设置响应式
3. 给props设置代理

defineReactive

给props设置响应式

1. Object.defineProperty - get，用于依赖收集；
2. Object.defineProperty - set，用于依赖更新；
3. 每个data声明的属性，都拥有一个专属依赖收集器subs;
4. 依赖收集器subs保存的依赖是watcher;
5. watcher可用于进行视图更新；

proxy

给props设置代理

Props有个暗箱操作，就是访问转移，你用this.xxx访问props时，实际上访问的是this._props.xxx;

1. 使用 props 在 vm 上占位，使得可以通过 vm.xxx 的形式访问到 props;
2. 设置 Object.defineProperty的 get 和 set ，间接获取和赋值 vm._props，所有对 props的操作，转接到 vm._props 上；