Skip to content

Latest commit

 

History

History
26 lines (17 loc) · 1.71 KB

1-2.md

File metadata and controls

26 lines (17 loc) · 1.71 KB

实现ref,以及业务的拆分

RefImpl

src/reactivity/ref.ts

一个类,代表了ref的具体功能实现,接受一个元素,返回一个含有value属性的包装对象,如果初始原始是对象,则会将对象包装成reactive对象

ref

src/reactivity/ref.ts

一个函数,调用后返回RefImpl类的对象

拆分业务

由于ref不同reactive,并不需要将整个对象的全部属性都进行监听,因此原有的依赖收集函数track跟effect触发函数trigger并不是很适用,所以只需要单独抽出来,原有的reactive是将raw对象的每个属性都创建一个自己的deps来记录effect,而ref仅仅只需要跟踪value的变化,因此独立创建一个deps数组放在对象上即可。虽然经过思考,直接继承ReactiveEffect类,然后重写方法也能实现,但是单独创建一个类来实现,可以精简类的属性,更节省空间,而ReactiveEffect后续看情况还会添加更多的方法来实现其他功能,这些都是ref不必须的。

proxyRefs

src/reactivity/ref.ts

一个函数,用来包装一个对象,代理其内部的ref属性,如果这个对象的属性是ref,则在赋值的时候做判断:

  • 赋值的新值是ref,则直接替换属性为新的的ref
  • 赋值的新值不是ref,则将新值设置到属性的value上

computed

src/reactivity/computed.ts

一个函数,会去调用Computed类创建一个对象,初始化时会创建ActiveEffect对象,但是不会去立刻执行run方法进行依赖收集,而是等待初次获取时候才会懒加载。