diff --git a/README.md b/README.md index 14d8f1d..3f66e9a 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ # .prettierrc +``` { "semi": false,// 结尾无分号 "singleQuote": true,// 单引号 "printWidth": 80,// 每行长度为80 "trailingComma": "none",// 不添加尾随逗号 "arrowParens": "avoid"// 省略箭头函数的括号 -} \ No newline at end of file +} +``` \ No newline at end of file diff --git a/package.json b/package.json index 0af703b..3b9e4f6 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "main": "index.js", "scripts": { + "dev": "rollup -c -w", "build": "rollup -c", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts index ed402aa..a8d1d9f 100644 --- a/packages/reactivity/src/baseHandlers.ts +++ b/packages/reactivity/src/baseHandlers.ts @@ -1,4 +1,32 @@ /** * 响应性的handler */ -export const mutableHandlers: ProxyHandler = {} +import { track, trigger } from './effect' + +const get = createGetter() +function createGetter() { + return function get(target: object, key: string | symbol, receiver: object) { + const res = Reflect.get(target, key, receiver) + track(target, key) + return res + } +} + +const set = createSetter() +function createSetter() { + return function set( + target: object, + key: string | symbol, + value: unknown, + receiver: object + ) { + const result = Reflect.set(target, key, value, receiver) + trigger(target, key, value) + return result + } +} + +export const mutableHandlers: ProxyHandler = { + get, + set +} diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts new file mode 100644 index 0000000..b593b86 --- /dev/null +++ b/packages/reactivity/src/effect.ts @@ -0,0 +1,33 @@ +export function effect(fn: () => T) { + const _effect = new ReactiveEffect(fn) + _effect.run() +} + +export let activeEffect: ReactiveEffect | undefined + +export class ReactiveEffect { + 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') +} diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts index 33ea422..57ad7ec 100644 --- a/packages/reactivity/src/index.ts +++ b/packages/reactivity/src/index.ts @@ -1 +1,2 @@ export { reactive } from './reactive' +export { effect } from './effect' diff --git a/packages/vue/examples/reactivity/reactive.html b/packages/vue/examples/reactivity/reactive.html index 7748aa4..f23a65f 100644 --- a/packages/vue/examples/reactivity/reactive.html +++ b/packages/vue/examples/reactivity/reactive.html @@ -6,14 +6,15 @@ - +
\ No newline at end of file diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 66bdf72..9fd7656 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1 +1 @@ -export { reactive } from '@vue/reactivity' +export { reactive, effect } from '@vue/reactivity'