@viewfly/core 3.0.0-alpha.8 → 3.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @viewfly/core
 
-Viewfly 的**内核包**：函数组件、JSX、响应式与信号、`watch`、生命周期、`inject` 与 IoC 相关 API、以及 **`withMark`** 等与 UI 逻辑直接相关的入口均由此包提供。
+Viewfly 的**内核包**：函数组件、`JSX`、响应式与 `signal`、`watch`、生命周期、`inject` 与 IoC 相关 API、以及 **`withMark`** 等与 UI 逻辑直接相关的入口均由此包提供。
 
 在浏览器里挂载应用请使用 **`@viewfly/platform-browser`** 的 **`createApp`**（其内部使用本包提供的应用模型）。
 
@@ -9,8 +9,7 @@ Viewfly 的**内核包**：函数组件、JSX、响应式与信号、`watch`、
 ## 安装
 
 ```bash
-pnpm add @viewfly/core
-# 或 npm / yarn
+npm install @viewfly/core
 ```
 
 本包依赖 **`reflect-metadata`**。正常从 **`@viewfly/core`** 的主入口导入时，会随模块加载一并初始化；若你的打包拆包方式导致依赖注入相关运行时异常，可在应用入口**最先**增加显式导入：
@@ -19,7 +18,7 @@ pnpm add @viewfly/core
 import 'reflect-metadata'
 ```
 
-更稳妥的做法以**当前安装版本**随附的类型定义与 README 为准。
+更稳妥的做法以**当前安装版本**随附的类型定义与官方文档（<https://viewfly.org>）为准。
 
 ---
 
@@ -49,7 +48,7 @@ import 'reflect-metadata'
 | 组件 | 函数组件：在 JSX 中当标签使用；配合生命周期钩子使用。 |
 | 生命周期 | **`onMounted`**、**`onUpdated`**、**`onUnmounted`** 等（须在组件 setup 阶段调用）。 |
 | 响应式 | **`reactive`**、**`shallowReactive`**、**`watch`** 等（`reactive` 模块）。 |
-| 信号 / 派生 | **`createSignal`**、**`computed`** 等（见 `reactive` 导出；具体符号以类型为准）。 |
+| `signal` / 派生 | **`createSignal`**、**`computed`** 等（见 `reactive` 导出；具体符号以类型为准）。 |
 | 依赖注入 | 在组件内用 **`inject`** 解析 token；用 **`Injectable()`** 声明可注入类；用 **`withAnnotation`** 或 **`createContext`** / **`createContextProvider`** 挂载 **`Provider`**；根应用上通过 **`createApp(...).provide(...)`**（由 **`@viewfly/platform-browser`** 提供）注册全局提供者。 |
 | 自定义 DOM 属性标记 | **`withMark(marks, setup)`**：为组件渲染出的元素附加与 `marks` 同名的属性（常用于 scoped CSS 的 `scopeId` 等场景）。 |
 
@@ -59,8 +58,9 @@ import 'reflect-metadata'
 
 ## 文档与示例
 
-- **权威说明**：本文件、源码注释与发布包中的 **`.d.ts`**（第三方文档站点可能滞后）。
-- **本仓库试跑**：仓库根目录执行 `pnpm dev` 打开 playground
+- **官方文档**：<https://viewfly.org>（重点见安装、组件、响应式、依赖注入）。
+- **类型与注释**：发布包中的 **`.d.ts`** 与源码注释可用于补充 API 细节。
+- **本仓库试跑**：克隆仓库后使用 **pnpm** 安装依赖，在仓库根目录执行 `pnpm dev` 打开 playground。
 
 ---
 

package/dist/base/component.d.ts

@@ -28,7 +28,7 @@ export declare class Component {
     props: Record<string, any>;
     readonly key?: Key;
     instance: ComponentInstance;
-    changedSubComponents: Set<Component>;
+    changedSubComponents: Set<Component> | null;
     get dirty(): boolean;
     get changed(): boolean;
     /**
@@ -55,6 +55,7 @@ export declare class Component {
     rendered(): void;
     private invokeMountHooks;
     private invokeUpdatedHooks;
+    private getOrCreateRefEffects;
 }
 /**
  * 获取当前组件实例

package/dist/index.esm.js

@@ -615,6 +615,15 @@ function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
 	subscriber.delete(type);
 	if (subscriber.size === 0) subscribers.delete(target);
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+function hasEffectSubscribers(target, type, key = unKnownKey) {
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return false;
+	const record = subscriber.get(type);
+	if (!record) return false;
+	const effects = record.get(key);
+	return !!effects && effects.size > 0;
+}
 function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
@@ -1469,7 +1478,7 @@ var Component = class {
 		this.props = props;
 		this.key = key;
 		this.instance = null;
-		this.changedSubComponents = /* @__PURE__ */ new Set();
+		this.changedSubComponents = null;
 		this.viewMetadata = null;
 		this.unmountedCallbacks = null;
 		this.mountCallbacks = null;
@@ -1480,7 +1489,7 @@ var Component = class {
 		this.isFirstRendering = true;
 		this.rawProps = props;
 		this.props = createShallowReadonlyProxy({ ...props });
-		this.refEffects = /* @__PURE__ */ new Map();
+		this.refEffects = null;
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
 		}, "sync");
@@ -1490,7 +1499,10 @@ var Component = class {
 		this.markAsChanged();
 	}
 	markAsChanged(changedComponent) {
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		if (this._changed) return;
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
@@ -1501,8 +1513,13 @@ var Component = class {
 		const isRenderFn = typeof render === "function";
 		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
-			applyRefs(this.props.ref, this.instance, this.refEffects);
+			const refs = this.props.ref;
+			if (refs) {
+				const refEffects = this.getOrCreateRefEffects();
+				applyRefs(refs, this.instance, refEffects);
+			}
 			return () => {
+				if (!this.refEffects) return;
 				this.refEffects.forEach((fn) => {
 					if (typeof fn === "function") fn();
 				});
@@ -1519,7 +1536,10 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
-		updateRefs(newRefs, this.instance, this.refEffects);
+		if (oldProps.ref || newRefs) {
+			const refEffects = this.getOrCreateRefEffects();
+			updateRefs(newRefs, this.instance, refEffects);
+		}
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1549,10 +1569,10 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1591,6 +1611,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1977,24 +2001,20 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
 	const rawContext = context;
-	const { computedContainer } = component.viewMetadata;
+	const { computedContainer, contextContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer) if (portalContainer === context.contextContainer) {
+	if (portalContainer) {
 		if (portalContainer !== computedContainer) needMove = true;
-	} else {
-		if (portalContainer !== computedContainer) needMove = true;
-		context = {
+		if (portalContainer !== context.contextContainer) context = {
 			isParent: true,
 			anchorNode: portalContainer,
-			contextContainer: portalContainer,
+			contextContainer: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (computedContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
-		...context,
-		contextContainer: rawContext.contextContainer
+		...context
 	};
 	newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
 	diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
@@ -2019,9 +2039,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		}
 		component.rendered();
 	} else if (component.changed) {
-		component.changedSubComponents.forEach((child) => {
-			deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
-		});
+		const changedSubComponents = component.changedSubComponents;
+		if (changedSubComponents) for (const child of changedSubComponents) deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
 		component.rendered();
 	}
 }
@@ -2122,15 +2141,17 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			view.anchorNode = updatedContext.anchorNode;
 			view.isParent = updatedContext.isParent;
 		}
+		component.rendered();
 	} else {
 		component.viewMetadata = {
 			atom: newAtom,
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !component.changedSubComponents.size);
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
+		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
+		if (!skipSubComponentDiff) component.rendered();
 	}
-	component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
 	const updateContext = (atom) => {
@@ -2456,7 +2477,10 @@ var RootComponent = class extends Component {
 	}
 	markAsChanged(changedComponent) {
 		this._changed = true;
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		this.refresh();
 	}
 };
@@ -2533,29 +2557,39 @@ function viewfly(config) {
 /**
 * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
 * computed 会返回一个对象，对象的 value 属性是计算的值。
+*
+* 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+* 避免无关依赖抖动导致的下游副作用。
+*
 * @param getter 计算函数，用于计算值
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
 	let cacheValue;
+	let hasCache = false;
 	let dirty = true;
 	const target = { get value() {
-		if (dirty) {
-			dep.destroy();
-			pushDepContext(dep);
-			try {
-				cacheValue = getter();
-				dirty = false;
-			} finally {
-				popDepContext();
-			}
-		}
+		if (dirty) flushComputed(false);
 		return cacheValue;
 	} };
+	function flushComputed(notify) {
+		dep.destroy();
+		pushDepContext(dep);
+		try {
+			const newValue = getter();
+			const changed = !hasCache || !Object.is(newValue, cacheValue);
+			hasCache = true;
+			cacheValue = newValue;
+			dirty = false;
+			if (notify && changed) trigger(target, TriggerOpTypes.Set, "value");
+		} finally {
+			popDepContext();
+		}
+	}
 	const dep = new Dep(() => {
 		if (!dirty) {
 			dirty = true;
-			trigger(target, TriggerOpTypes.Set, "value");
+			if (hasEffectSubscribers(target, TrackOpTypes.Get, "value")) flushComputed(true);
 		}
 	}, "sync");
 	registryComponentDestroyCallback(() => {
@@ -2642,4 +2676,4 @@ function createSignal(state) {
 	return signal;
 }
 //#endregion
-export { ArrayReactiveHandler, Component, Dep, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Portal, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, applyMark, applyRefs, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDynamicRef, createRef, createRenderer, createShallowReadonlyProxy, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, flushReactiveEffectsSync, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, nextTick, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowProxyToRawCache, shallowRawToProxyCache, shallowReactive, toRaw, track, trigger, updateRefs, viewfly, watch, watchEffect, withAnnotation, withMark };
+export { ArrayReactiveHandler, Component, Dep, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Portal, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, applyMark, applyRefs, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDynamicRef, createRef, createRenderer, createShallowReadonlyProxy, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, flushReactiveEffectsSync, forwardRef, getCurrentInstance, getDepContext, getSetupContext, hasEffectSubscribers, inject, internalWrite, isReactive, jsx, jsxs, makeError, nextTick, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowProxyToRawCache, shallowRawToProxyCache, shallowReactive, toRaw, track, trigger, updateRefs, viewfly, watch, watchEffect, withAnnotation, withMark };

package/dist/index.js

@@ -616,6 +616,15 @@ function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
 	subscriber.delete(type);
 	if (subscriber.size === 0) subscribers.delete(target);
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+function hasEffectSubscribers(target, type, key = unKnownKey) {
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return false;
+	const record = subscriber.get(type);
+	if (!record) return false;
+	const effects = record.get(key);
+	return !!effects && effects.size > 0;
+}
 function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
@@ -1470,7 +1479,7 @@ var Component = class {
 		this.props = props;
 		this.key = key;
 		this.instance = null;
-		this.changedSubComponents = /* @__PURE__ */ new Set();
+		this.changedSubComponents = null;
 		this.viewMetadata = null;
 		this.unmountedCallbacks = null;
 		this.mountCallbacks = null;
@@ -1481,7 +1490,7 @@ var Component = class {
 		this.isFirstRendering = true;
 		this.rawProps = props;
 		this.props = createShallowReadonlyProxy({ ...props });
-		this.refEffects = /* @__PURE__ */ new Map();
+		this.refEffects = null;
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
 		}, "sync");
@@ -1491,7 +1500,10 @@ var Component = class {
 		this.markAsChanged();
 	}
 	markAsChanged(changedComponent) {
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		if (this._changed) return;
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
@@ -1502,8 +1514,13 @@ var Component = class {
 		const isRenderFn = typeof render === "function";
 		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
-			applyRefs(this.props.ref, this.instance, this.refEffects);
+			const refs = this.props.ref;
+			if (refs) {
+				const refEffects = this.getOrCreateRefEffects();
+				applyRefs(refs, this.instance, refEffects);
+			}
 			return () => {
+				if (!this.refEffects) return;
 				this.refEffects.forEach((fn) => {
 					if (typeof fn === "function") fn();
 				});
@@ -1520,7 +1537,10 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
-		updateRefs(newRefs, this.instance, this.refEffects);
+		if (oldProps.ref || newRefs) {
+			const refEffects = this.getOrCreateRefEffects();
+			updateRefs(newRefs, this.instance, refEffects);
+		}
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1550,10 +1570,10 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1592,6 +1612,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1978,24 +2002,20 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
 	const rawContext = context;
-	const { computedContainer } = component.viewMetadata;
+	const { computedContainer, contextContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer) if (portalContainer === context.contextContainer) {
+	if (portalContainer) {
 		if (portalContainer !== computedContainer) needMove = true;
-	} else {
-		if (portalContainer !== computedContainer) needMove = true;
-		context = {
+		if (portalContainer !== context.contextContainer) context = {
 			isParent: true,
 			anchorNode: portalContainer,
-			contextContainer: portalContainer,
+			contextContainer: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (computedContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
-		...context,
-		contextContainer: rawContext.contextContainer
+		...context
 	};
 	newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
 	diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
@@ -2020,9 +2040,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		}
 		component.rendered();
 	} else if (component.changed) {
-		component.changedSubComponents.forEach((child) => {
-			deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
-		});
+		const changedSubComponents = component.changedSubComponents;
+		if (changedSubComponents) for (const child of changedSubComponents) deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
 		component.rendered();
 	}
 }
@@ -2123,15 +2142,17 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			view.anchorNode = updatedContext.anchorNode;
 			view.isParent = updatedContext.isParent;
 		}
+		component.rendered();
 	} else {
 		component.viewMetadata = {
 			atom: newAtom,
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !component.changedSubComponents.size);
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
+		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
+		if (!skipSubComponentDiff) component.rendered();
 	}
-	component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
 	const updateContext = (atom) => {
@@ -2457,7 +2478,10 @@ var RootComponent = class extends Component {
 	}
 	markAsChanged(changedComponent) {
 		this._changed = true;
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		this.refresh();
 	}
 };
@@ -2534,29 +2558,39 @@ function viewfly(config) {
 /**
 * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
 * computed 会返回一个对象，对象的 value 属性是计算的值。
+*
+* 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+* 避免无关依赖抖动导致的下游副作用。
+*
 * @param getter 计算函数，用于计算值
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
 	let cacheValue;
+	let hasCache = false;
 	let dirty = true;
 	const target = { get value() {
-		if (dirty) {
-			dep.destroy();
-			pushDepContext(dep);
-			try {
-				cacheValue = getter();
-				dirty = false;
-			} finally {
-				popDepContext();
-			}
-		}
+		if (dirty) flushComputed(false);
 		return cacheValue;
 	} };
+	function flushComputed(notify) {
+		dep.destroy();
+		pushDepContext(dep);
+		try {
+			const newValue = getter();
+			const changed = !hasCache || !Object.is(newValue, cacheValue);
+			hasCache = true;
+			cacheValue = newValue;
+			dirty = false;
+			if (notify && changed) trigger(target, TriggerOpTypes.Set, "value");
+		} finally {
+			popDepContext();
+		}
+	}
 	const dep = new Dep(() => {
 		if (!dirty) {
 			dirty = true;
-			trigger(target, TriggerOpTypes.Set, "value");
+			if (hasEffectSubscribers(target, TrackOpTypes.Get, "value")) flushComputed(true);
 		}
 	}, "sync");
 	registryComponentDestroyCallback(() => {
@@ -2695,6 +2729,7 @@ exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
 exports.getDepContext = getDepContext;
 exports.getSetupContext = getSetupContext;
+exports.hasEffectSubscribers = hasEffectSubscribers;
 exports.inject = inject;
 exports.internalWrite = internalWrite;
 exports.isReactive = isReactive;

package/dist/reactive/computed.d.ts

@@ -4,6 +4,10 @@ export interface Computed<T> {
 /**
  * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
  * computed 会返回一个对象，对象的 value 属性是计算的值。
+ *
+ * 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+ * 避免无关依赖抖动导致的下游副作用。
+ *
  * @param getter 计算函数，用于计算值
  * @returns 一个对象，对象的 value 属性是计算的值
  */

package/dist/reactive/effect.d.ts

@@ -16,5 +16,7 @@ export declare enum TriggerOpTypes {
     Clear = "Clear",
     Iterate = "Iterate"
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+export declare function hasEffectSubscribers(target: object, type: TrackOpTypes, key?: unknown): boolean;
 export declare function track(target: object, type: TrackOpTypes, key?: unknown): void;
 export declare function trigger(target: object, type: TriggerOpTypes, key?: unknown): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.1",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",