odjbin/vue-core-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(effects): 添加 scheduler 选项支持和 extend 工具函数

Browse Source 
- 添加 extend 函数作为 Object.assign 的别名
- 修复 ReactiveEffectOptions 中 scheduler 属性拼写错误
- 实现 effect 选项配置的属性扩展功能
- 更新 lazy 示例展示 effect 运行逻辑
- 新增 scheduler 示例演示调度器功能
This commit is contained in:
dj
2026-02-10 17:54:23 +08:00
parent 62e40e7292
commit 1f50ab1c84
4 changed files with 45 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/reactivity/src/effect.ts
View File

@@ -1,5 +1,5 @@
import { createDep, Dep } from './dep' import { createDep, Dep } from './dep'
import { isArray } from '@vue/shared' import { extend, isArray } from '@vue/shared'
import { ComputedRefImpl } from './computed' import { ComputedRefImpl } from './computed'
export type EffectScheduler = (...args: any[]) => any export type EffectScheduler = (...args: any[]) => any
@@ -15,10 +15,14 @@ const targetMap = new WeakMap<any, KeyToDepMap>()
export interface ReactiveEffectOptions { export interface ReactiveEffectOptions {
lazy?: boolean lazy?: boolean
schedler?: EffectScheduler scheduler?: EffectScheduler
} }
export function effect<T = any>(fn: () => T, options?: ReactiveEffectOptions) { export function effect<T = any>(fn: () => T, options?: ReactiveEffectOptions) {
const _effect = new ReactiveEffect(fn) const _effect = new ReactiveEffect(fn)
if (options) {
extend(_effect, options)
}
if (!options || !options.lazy) { if (!options || !options.lazy) {
_effect.run() _effect.run()
} }

2
packages/shared/src/index.ts
View File

@@ -13,3 +13,5 @@ export const hasChanged = (value: any, oldValue: any): boolean =>
export const isFunction = (val: unknown): val is Function => { export const isFunction = (val: unknown): val is Function => {
return typeof val === 'function' return typeof val === 'function'
} }
export const extend = Object.assign

16
packages/vue/examples/reactivity/lazy.html
View File

@@ -13,16 +13,14 @@
const obj=reactive({ const obj=reactive({
count:1 count:1
}) })
let {name}=obj
console.log('name',name);
effect(()=>{ effect(()=>{
document.querySelector('#app').innerText=name console.log('obj.count',obj.count)
},{
lazy:false
}) })
setTimeout(()=>{ obj.count=2
obj.name='李四'
console.log('代码运行结束');
console.log('obj',obj);
},2000)
</script> </script>
</html> </html>

30
packages/vue/examples/reactivity/scheduler.html Normal file
View File

@@ -0,0 +1,30 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const { reactive,effect } = Vue
const obj=reactive({
count:1
})
effect(()=>{
console.log(obj.count)
},{
scheduler(){
setTimeout(()=>{
console.log(obj.count)
})
}
})
obj.count=2
console.log('代码运行结束');
</script>
</html>