@viewfly/core 3.0.0 → 3.0.2

package/README.en.md

@@ -0,0 +1,71 @@
+# @viewfly/core
+
+**Languages:** [简体中文](./README.md)
+
+The **core** Viewfly package: function components, JSX, reactivity and `signal`, `watch`, lifecycle, `inject` / IoC APIs, and **`withMark`** for UI-facing utilities.
+
+To mount in the browser use **`createApp`** from **`@viewfly/platform-browser`** (built on this package’s application model).
+
+---
+
+## Install
+
+```bash
+npm install @viewfly/core
+```
+
+This package depends on **`reflect-metadata`**. Importing from the **`@viewfly/core`** main entry initializes it; if DI breaks after aggressive splitting, add at the **top** of your entry:
+
+```ts
+import 'reflect-metadata'
+```
+
+Prefer the **`.d.ts`** shipped with your installed version and the official docs (<https://viewfly.org>) as the source of truth.
+
+---
+
+## JSX / TSX setup
+
+Enable automatic JSX runtime and point it at this package:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@viewfly/core"
+  }
+}
+```
+
+With Babel, align `@babel/preset-react` (`runtime: "automatic"`, `importSource: "@viewfly/core"`).
+
+---
+
+## Capabilities (user-facing)
+
+Common directions below — **exact types and parameters come from `.d.ts` and the docs**.
+
+| Area | Public API hints |
+|------|------------------|
+| Components | Function components as JSX tags; pair with lifecycle hooks. |
+| Lifecycle | **`onMounted`**, **`onUpdated`**, **`onUnmounted`**, etc. (call during component setup). |
+| Reactivity | **`reactive`**, **`shallowReactive`**, **`watch`**, … (`reactive` module). |
+| `signal` / derived | **`createSignal`**, **`computed`**, … (see `reactive` exports). |
+| DI | **`inject`** in components; **`Injectable()`** on classes; **`withAnnotation`** or **`createContext`** / **`createContextProvider`** for providers; root **`createApp(...).provide(...)`** from **`@viewfly/platform-browser`**. |
+| DOM marks | **`withMark(marks, setup)`** — attach attributes (e.g. scoped CSS `scopeId`). |
+
+Symbols marked **`@internal`** or undocumented on the site are for framework/experimental use — **avoid relying on them** in apps; they may change without semver guarantees.
+
+---
+
+## Docs & examples
+
+- **Official docs:** <https://viewfly.org> (install, components, reactivity, DI).
+- **Types & comments:** published **`.d.ts`** and source comments.
+- **This repo:** `pnpm install` at root, then `pnpm dev` for the playground.
+
+---
+
+## License
+
+MIT

package/README.md

@@ -1,5 +1,7 @@
 # @viewfly/core
 
+**Languages:** [English](./README.en.md)
+
 Viewfly 的**内核包**：函数组件、`JSX`、响应式与 `signal`、`watch`、生命周期、`inject` 与 IoC 相关 API、以及 **`withMark`** 等与 UI 逻辑直接相关的入口均由此包提供。
 
 在浏览器里挂载应用请使用 **`@viewfly/platform-browser`** 的 **`createApp`**（其内部使用本包提供的应用模型）。

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;
     /**
@@ -48,13 +48,13 @@ export declare class Component {
     constructor(parentComponent: Component | null, type: ComponentSetup, props: Record<string, any>, key?: Key);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
-    render(update: (template: JSXNode) => void): void;
+    render(): JSXNode;
     updateProps(newProps: Record<string, any>): void;
-    rerender(): JSXNode;
     destroy(): void;
     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) {
@@ -1466,10 +1475,9 @@ var Component = class {
 	constructor(parentComponent, type, props, key) {
 		this.parentComponent = parentComponent;
 		this.type = type;
-		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 +1488,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,19 +1498,34 @@ 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);
 	}
-	render(update) {
+	render() {
+		if (this.instance) {
+			this.listener.destroy();
+			pushDepContext(this.listener);
+			const template = this.instance.render();
+			popDepContext();
+			return template;
+		}
 		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		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();
 				});
@@ -1512,14 +1535,16 @@ var Component = class {
 		pushDepContext(this.listener);
 		const template = this.instance.render();
 		popDepContext();
-		update(template);
-		this.rendered();
+		return template;
 	}
 	updateProps(newProps) {
 		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);
@@ -1534,13 +1559,6 @@ var Component = class {
 			});
 		});
 	}
-	rerender() {
-		this.listener.destroy();
-		pushDepContext(this.listener);
-		const template = this.instance.render();
-		popDepContext();
-		return template;
-	}
 	destroy() {
 		this.listener.destroy();
 		if (this.updatedDestroyCallbacks) this.updatedDestroyCallbacks.forEach((fn) => {
@@ -1549,10 +1567,11 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.isFirstRendering = true;
+		this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = this.instance = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1591,6 +1610,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1974,23 +1997,20 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const newTemplate = component.rerender();
+	const newTemplate = component.render();
 	const portalContainer = getContainer();
 	const rawContext = context;
 	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: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (contextContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
 		...context
@@ -2018,9 +2038,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();
 	}
 }
@@ -2128,7 +2147,7 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		const skipSubComponentDiff = !component.changedSubComponents.size;
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
 		if (!skipSubComponentDiff) component.rendered();
 	}
@@ -2198,26 +2217,26 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template) => {
-		const portalContainer = getContainer();
-		popContainer();
-		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		if (portalContainer && portalContainer !== context.contextContainer) context = {
-			isParent: true,
-			anchorNode: portalContainer,
-			contextContainer: context.contextContainer,
-			computedContainer: portalContainer
-		};
-		component.viewMetadata = {
-			atom: from,
-			...context
-		};
-		let child = from.child;
-		while (child) {
-			buildView(nativeRenderer, component, child, context);
-			child = child.sibling;
-		}
-	});
+	const template = component.render();
+	const portalContainer = getContainer();
+	popContainer();
+	from.child = createChildChain(template, nativeRenderer, from.namespace);
+	if (portalContainer && portalContainer !== context.contextContainer) context = {
+		isParent: true,
+		anchorNode: portalContainer,
+		contextContainer: context.contextContainer,
+		computedContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: from,
+		...context
+	};
+	let child = from.child;
+	while (child) {
+		buildView(nativeRenderer, component, child, context);
+		child = child.sibling;
+	}
+	component.rendered();
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
 	const atom = {
@@ -2457,7 +2476,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 +2556,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(() => {
@@ -2643,4 +2675,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) {
@@ -1467,10 +1476,9 @@ var Component = class {
 	constructor(parentComponent, type, props, key) {
 		this.parentComponent = parentComponent;
 		this.type = type;
-		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 +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");
@@ -1491,19 +1499,34 @@ 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);
 	}
-	render(update) {
+	render() {
+		if (this.instance) {
+			this.listener.destroy();
+			pushDepContext(this.listener);
+			const template = this.instance.render();
+			popDepContext();
+			return template;
+		}
 		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		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();
 				});
@@ -1513,14 +1536,16 @@ var Component = class {
 		pushDepContext(this.listener);
 		const template = this.instance.render();
 		popDepContext();
-		update(template);
-		this.rendered();
+		return template;
 	}
 	updateProps(newProps) {
 		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);
@@ -1535,13 +1560,6 @@ var Component = class {
 			});
 		});
 	}
-	rerender() {
-		this.listener.destroy();
-		pushDepContext(this.listener);
-		const template = this.instance.render();
-		popDepContext();
-		return template;
-	}
 	destroy() {
 		this.listener.destroy();
 		if (this.updatedDestroyCallbacks) this.updatedDestroyCallbacks.forEach((fn) => {
@@ -1550,10 +1568,11 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.isFirstRendering = true;
+		this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = this.instance = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1592,6 +1611,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1975,23 +1998,20 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const newTemplate = component.rerender();
+	const newTemplate = component.render();
 	const portalContainer = getContainer();
 	const rawContext = context;
 	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: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (contextContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
 		...context
@@ -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();
 	}
 }
@@ -2129,7 +2148,7 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		const skipSubComponentDiff = !component.changedSubComponents.size;
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
 		if (!skipSubComponentDiff) component.rendered();
 	}
@@ -2199,26 +2218,26 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template) => {
-		const portalContainer = getContainer();
-		popContainer();
-		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		if (portalContainer && portalContainer !== context.contextContainer) context = {
-			isParent: true,
-			anchorNode: portalContainer,
-			contextContainer: context.contextContainer,
-			computedContainer: portalContainer
-		};
-		component.viewMetadata = {
-			atom: from,
-			...context
-		};
-		let child = from.child;
-		while (child) {
-			buildView(nativeRenderer, component, child, context);
-			child = child.sibling;
-		}
-	});
+	const template = component.render();
+	const portalContainer = getContainer();
+	popContainer();
+	from.child = createChildChain(template, nativeRenderer, from.namespace);
+	if (portalContainer && portalContainer !== context.contextContainer) context = {
+		isParent: true,
+		anchorNode: portalContainer,
+		contextContainer: context.contextContainer,
+		computedContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: from,
+		...context
+	};
+	let child = from.child;
+	while (child) {
+		buildView(nativeRenderer, component, child, context);
+		child = child.sibling;
+	}
+	component.rendered();
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
 	const atom = {
@@ -2458,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();
 	}
 };
@@ -2535,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(() => {
@@ -2696,6 +2728,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",
+  "version": "3.0.2",
   "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",