feat(core): 实现响应性系统的核心功能
- 添加 effect 函数用于创建响应性副作用 - 实现 ReactiveEffect 类来管理响应性执行 - 添加 track 函数用于依赖收集 - 添加 trigger 函数用于触发依赖更新 - 在 baseHandlers 中实现 Proxy 的 get 和 set 拦截器 - 将 effect 导出到 vue 包的入口文件 - 添加 dev 脚本用于监听构建 - 更新示例文件展示响应性功能的使用 - 修复 README.md 中代码块格式问题
This commit is contained in:
33
packages/reactivity/src/effect.ts
Normal file
33
packages/reactivity/src/effect.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
export function effect<T = any>(fn: () => T) {
|
||||
const _effect = new ReactiveEffect(fn)
|
||||
_effect.run()
|
||||
}
|
||||
|
||||
export let activeEffect: ReactiveEffect | undefined
|
||||
|
||||
export class ReactiveEffect<T = any> {
|
||||
constructor(public fn: () => T) {}
|
||||
run() {
|
||||
activeEffect = this
|
||||
return this.fn()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 收集依赖
|
||||
* @param target
|
||||
* @param key
|
||||
*/
|
||||
export function track(target: object, key: unknown) {
|
||||
console.log('收集依赖 track')
|
||||
}
|
||||
|
||||
/**
|
||||
* 触发依赖
|
||||
* @param target
|
||||
* @param key
|
||||
* @param newValue
|
||||
*/
|
||||
export function trigger(target: object, key: unknown, newValue: unknown) {
|
||||
console.log('触发依赖 trigger')
|
||||
}
|
||||
Reference in New Issue
Block a user