# 文档介绍
接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。
# 实现原理
- 因为返回的是一个 ref 对象,所以需要一个
RefImpl
类,在类里面进行get value
和set value
操作 get value
里进行依赖的收集,set value
里进行依赖的触发
# 完整代码
import { hasChanged, isObject } from '../utils/index'; | |
import { track, trigger } from './effect'; | |
import { reactive } from './reactive'; | |
export function ref(value: any) { | |
if (isRef(value)) return value; | |
return new RefImpl(value); | |
} | |
export function isRef(value: any) { | |
return !!(value && value.__isRef); | |
} | |
class RefImpl { | |
_value: any; | |
__isRef: boolean; | |
constructor(value: any) { | |
this._value = convert(value); | |
this.__isRef = true; | |
} | |
get value() { | |
track(this, 'value'); | |
return this._value; | |
} | |
set value(newValue) { | |
if (hasChanged(this._value, newValue)) { | |
this._value = newValue; | |
trigger(this, 'value'); | |
} | |
} | |
} | |
function convert(value: any) { | |
return isObject(value) ? reactive(value) : value; | |
} |
# 代码执行过程梳理
- 判断传递过来的是不是一个
ref
,是的话则直接返回,不是的话,则调用RefImpl
来实列化,返回一个 ref 对象 - 实列化的过程中,constructor 构造函数会调用
convert
对 value 进行处理,判断是不是对象,是对象则调用reactive
将对象变成响应式的,不是则直接返回,将标志变量isRef
设置为true
。 - 读取 ref 对象的 value 时则触发
get value
,进行依赖的收集。 - 修改 ref 对象的 value 时则触发
set value
, 进行依赖的触发。