@viewfly/core 3.0.0-alpha.0 → 3.0.0-alpha.2

package/README.md

@@ -19,7 +19,7 @@ pnpm add @viewfly/core
 import 'reflect-metadata'
 ```
 
-更稳妥的做法以 [官网](https://viewfly.org) 与当前版本的说明为准。
+更稳妥的做法以**当前安装版本**随附的类型定义与 README 为准。
 
 ---
 
@@ -49,7 +49,7 @@ import 'reflect-metadata'
 | 组件 | 函数组件：在 JSX 中当标签使用；配合生命周期钩子使用。 |
 | 生命周期 | **`onMounted`**、**`onUpdated`**、**`onUnmounted`** 等（须在组件 setup 阶段调用）。 |
 | 响应式 | **`reactive`**、**`shallowReactive`**、**`watch`** 等（`reactive` 模块）。 |
-| 信号 | **`createSignal`**、**`createEffect`**、**`createDerived`** 等（`signals` 模块）。 |
+| 信号 / 派生 | **`createSignal`**、**`computed`** 等（见 `reactive` 导出；具体符号以类型为准）。 |
 | 依赖注入 | 在组件内用 **`inject`** 解析 token；用 **`Injectable()`** 声明可注入类；用 **`withAnnotation`** 或 **`createContext`** / **`createContextProvider`** 挂载 **`Provider`**；根应用上通过 **`createApp(...).provide(...)`**（由 **`@viewfly/platform-browser`** 提供）注册全局提供者。 |
 | 自定义 DOM 属性标记 | **`withMark(marks, setup)`**：为组件渲染出的元素附加与 `marks` 同名的属性（常用于 scoped CSS 的 `scopeId` 等场景）。 |
 
@@ -59,7 +59,7 @@ import 'reflect-metadata'
 
 ## 文档与示例
 
-- **官方文档**：[viewfly.org](https://viewfly.org)
+- **权威说明**：本文件、源码注释与发布包中的 **`.d.ts`**（第三方文档站点可能滞后）。
 - **本仓库试跑**：仓库根目录执行 `pnpm dev` 打开 playground
 
 ---

package/dist/index.esm.js

@@ -1063,9 +1063,17 @@ function hasChange(newProps, oldProps) {
 	return false;
 }
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
-	for (const key in oldProps) if (!(key in newProps)) onDeleted(key, oldProps[key]);
-	for (const key in newProps) if (!(key in oldProps)) onAdded(key, newProps[key]);
-	else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	const oldKeys = Object.keys(oldProps);
+	for (let i = 0; i < oldKeys.length; i++) {
+		const key = oldKeys[i];
+		if (!(key in newProps)) onDeleted(key, oldProps[key]);
+	}
+	const newKeys = Object.keys(newProps);
+	for (let i = 0; i < newKeys.length; i++) {
+		const key = newKeys[i];
+		if (!(key in oldProps)) onAdded(key, newProps[key]);
+		else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	}
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -1662,7 +1670,7 @@ var NativeRenderer = class {};
 //#endregion
 //#region src/base/renderer.ts
 var listenerReg = /^on[A-Z]/;
-var nativeNodeRefRecord = /* @__PURE__ */ new Map();
+var nativeNodeRefRecord = /* @__PURE__ */ new WeakMap();
 function createRenderer(component, nativeRenderer, namespace) {
 	let isInit = true;
 	return function render(host) {
@@ -1729,24 +1737,85 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		component.rendered();
 	}
 }
+function createOldAtomMatcher(oldAtoms) {
+	const typeMap = /* @__PURE__ */ new Map();
+	const cursorMap = /* @__PURE__ */ new WeakMap();
+	for (let i = 0; i < oldAtoms.length; i++) {
+		const atom = oldAtoms[i];
+		let nodeTypeMap = typeMap.get(atom.type);
+		if (!nodeTypeMap) {
+			nodeTypeMap = /* @__PURE__ */ new Map();
+			typeMap.set(atom.type, nodeTypeMap);
+		}
+		let keyMap = nodeTypeMap.get(atom.nodeType);
+		if (!keyMap) {
+			keyMap = /* @__PURE__ */ new Map();
+			nodeTypeMap.set(atom.nodeType, keyMap);
+		}
+		const key = atom.key;
+		const indices = keyMap.get(key);
+		if (indices) indices.push(i);
+		else keyMap.set(key, [i]);
+	}
+	const take = (atom, matched) => {
+		const nodeTypeMap = typeMap.get(atom.type);
+		if (!nodeTypeMap) return -1;
+		const keyMap = nodeTypeMap.get(atom.nodeType);
+		if (!keyMap) return -1;
+		const indices = keyMap.get(atom.key);
+		if (!indices || !indices.length) return -1;
+		let cursor = cursorMap.get(indices) ?? 0;
+		while (cursor < indices.length) {
+			const index = indices[cursor];
+			cursor++;
+			if (!matched[index]) {
+				cursorMap.set(indices, cursor);
+				return index;
+			}
+		}
+		cursorMap.set(indices, cursor);
+		return -1;
+	};
+	return { take };
+}
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
 	const commits = [];
-	while (newAtom) {
-		oldAtom = createChanges(newAtom, oldAtom, commits);
-		newAtom = newAtom.sibling;
-	}
+	const oldAtoms = [];
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		cleanView(nativeRenderer, dirtyDiffAtom, true);
+		oldAtoms.push(dirtyDiffAtom);
 		dirtyDiffAtom = dirtyDiffAtom.sibling;
 	}
+	const matched = new Array(oldAtoms.length).fill(false);
+	const matcher = createOldAtomMatcher(oldAtoms);
+	const pendingDeleteIndices = [];
+	let cursor = newAtom;
+	while (cursor) {
+		const matchedIndex = matcher.take(cursor, matched);
+		if (matchedIndex >= 0) {
+			matched[matchedIndex] = true;
+			commits.push({
+				dirtyAtom: oldAtoms[matchedIndex],
+				newAtom: cursor
+			});
+		} else commits.push({
+			dirtyAtom: null,
+			newAtom: cursor
+		});
+		cursor = cursor.sibling;
+	}
+	for (let i = 0; i < oldAtoms.length; i++) if (!matched[i]) {
+		pendingDeleteIndices.push(i);
+		cleanView(nativeRenderer, oldAtoms[i], true);
+	}
 	let offset = 0;
+	let pendingDeleteCursor = 0;
 	const len = commits.length;
 	for (let i = 0; i < len; i++) {
-		while (oldAtom) {
-			if (oldAtom.index <= i) {
+		while (pendingDeleteCursor < pendingDeleteIndices.length) {
+			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
 				offset--;
-				oldAtom = oldAtom.sibling;
+				pendingDeleteCursor++;
 				continue;
 			}
 			break;
@@ -1769,29 +1838,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
 		}
 	}
 }
-function createChanges(newAtom, oldAtom, commits) {
-	const startDiffAtom = oldAtom;
-	let prev = null;
-	while (oldAtom) {
-		if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
-			commits.push({
-				dirtyAtom: oldAtom,
-				newAtom
-			});
-			const next = oldAtom.sibling;
-			if (!prev) return next;
-			prev.sibling = next;
-			return startDiffAtom;
-		}
-		prev = oldAtom;
-		oldAtom = oldAtom.sibling;
-	}
-	commits.push({
-		dirtyAtom: null,
-		newAtom
-	});
-	return startDiffAtom;
-}
 function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
 	const nativeNode = oldAtom.nativeNode;
 	newAtom.nativeNode = nativeNode;
@@ -1890,9 +1936,12 @@ function cleanView(nativeRenderer, atom, needClean) {
 	}
 	if (atom.type === ElementAtomType) {
 		const record = nativeNodeRefRecord.get(atom);
-		if (record) record.forEach((fn) => {
-			if (typeof fn === "function") fn();
-		});
+		if (record) {
+			nativeNodeRefRecord.delete(atom);
+			record.forEach((fn) => {
+				if (typeof fn === "function") fn();
+			});
+		}
 	}
 	cleanChildren(atom, nativeRenderer, needClean);
 }
@@ -1981,7 +2030,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	for (const key in props) {
+	const propKeys = Object.keys(props);
+	const propKeyLen = propKeys.length;
+	for (let i = 0; i < propKeyLen; i++) {
+		const key = propKeys[i];
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2016,9 +2068,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	});
 	context.host = nativeNode;
 	context.isParent = false;
-	const refEffects = /* @__PURE__ */ new Map();
-	nativeNodeRefRecord.set(atom, refEffects);
-	applyRefs(bindingRefs, nativeNode, refEffects);
+	if (bindingRefs) {
+		const refEffects = /* @__PURE__ */ new Map();
+		nativeNodeRefRecord.set(atom, refEffects);
+		applyRefs(bindingRefs, nativeNode, refEffects);
+	}
 }
 function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
@@ -2037,8 +2091,20 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;
 	}
+	let unBindRefs;
 	let bindRefs;
 	let updatedChildren = false;
+	const styleCache = /* @__PURE__ */ new WeakMap();
+	const toStyleObject = (style) => {
+		if (style && typeof style === "object") {
+			const cached = styleCache.get(style);
+			if (cached) return cached;
+			const normalized = styleToObject(style);
+			styleCache.set(style, normalized);
+			return normalized;
+		}
+		return styleToObject(style);
+	};
 	comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
 		if (key === "children") {
 			updatedChildren = true;
@@ -2050,14 +2116,22 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			const oldStyle = toStyleObject(oldValue);
+			const styleNames = Object.keys(oldStyle);
+			for (let i = 0; i < styleNames.length; i++) {
+				const styleName = styleNames[i];
+				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
 			if (typeof oldValue === "function") nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
 			return;
 		}
-		if (key === "ref") return;
+		if (key === "ref") {
+			unBindRefs = oldValue;
+			return;
+		}
 		nativeRenderer.removeProperty(nativeNode, key, isSvg);
 	}, (key, value) => {
 		if (key === "children") {
@@ -2071,8 +2145,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const styleObj = styleToObject(value);
-			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			const styleObj = toStyleObject(value);
+			const styleNames = Object.keys(styleObj);
+			for (let i = 0; i < styleNames.length; i++) {
+				const styleName = styleNames[i];
+				nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2100,7 +2178,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2115,17 +2193,26 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "ref") {
+			unBindRefs = oldValue;
 			bindRefs = newValue;
 			return;
 		}
 		nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
 	});
 	if (!updatedChildren) newAtom.child = oldAtom.child;
-	let refEffects = nativeNodeRefRecord.get(oldAtom);
-	if (!refEffects) refEffects = /* @__PURE__ */ new Map();
-	nativeNodeRefRecord.delete(oldAtom);
-	nativeNodeRefRecord.set(newAtom, refEffects);
-	updateRefs(bindRefs, nativeNode, refEffects);
+	if (bindRefs === unBindRefs) {
+		const refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (refEffects) {
+			nativeNodeRefRecord.delete(oldAtom);
+			nativeNodeRefRecord.set(newAtom, refEffects);
+		}
+	} else {
+		let refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (!refEffects) refEffects = /* @__PURE__ */ new Map();
+		nativeNodeRefRecord.delete(oldAtom);
+		nativeNodeRefRecord.set(newAtom, refEffects);
+		updateRefs(bindRefs, nativeNode, refEffects);
+	}
 }
 //#endregion
 //#region src/base/root.component.ts
@@ -2216,9 +2303,13 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	return { get value() {
-		return getter();
-	} };
+	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
+	watchEffect(() => {
+		internalWrite(() => {
+			proxy.value = getter();
+		});
+	});
+	return proxy;
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts

package/dist/index.js

@@ -1064,9 +1064,17 @@ function hasChange(newProps, oldProps) {
 	return false;
 }
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
-	for (const key in oldProps) if (!(key in newProps)) onDeleted(key, oldProps[key]);
-	for (const key in newProps) if (!(key in oldProps)) onAdded(key, newProps[key]);
-	else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	const oldKeys = Object.keys(oldProps);
+	for (let i = 0; i < oldKeys.length; i++) {
+		const key = oldKeys[i];
+		if (!(key in newProps)) onDeleted(key, oldProps[key]);
+	}
+	const newKeys = Object.keys(newProps);
+	for (let i = 0; i < newKeys.length; i++) {
+		const key = newKeys[i];
+		if (!(key in oldProps)) onAdded(key, newProps[key]);
+		else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	}
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -2223,7 +2231,7 @@ var NativeRenderer = class {};
 //#endregion
 //#region src/base/renderer.ts
 var listenerReg = /^on[A-Z]/;
-var nativeNodeRefRecord = /* @__PURE__ */ new Map();
+var nativeNodeRefRecord = /* @__PURE__ */ new WeakMap();
 function createRenderer(component, nativeRenderer, namespace) {
 	let isInit = true;
 	return function render(host) {
@@ -2290,24 +2298,85 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		component.rendered();
 	}
 }
+function createOldAtomMatcher(oldAtoms) {
+	const typeMap = /* @__PURE__ */ new Map();
+	const cursorMap = /* @__PURE__ */ new WeakMap();
+	for (let i = 0; i < oldAtoms.length; i++) {
+		const atom = oldAtoms[i];
+		let nodeTypeMap = typeMap.get(atom.type);
+		if (!nodeTypeMap) {
+			nodeTypeMap = /* @__PURE__ */ new Map();
+			typeMap.set(atom.type, nodeTypeMap);
+		}
+		let keyMap = nodeTypeMap.get(atom.nodeType);
+		if (!keyMap) {
+			keyMap = /* @__PURE__ */ new Map();
+			nodeTypeMap.set(atom.nodeType, keyMap);
+		}
+		const key = atom.key;
+		const indices = keyMap.get(key);
+		if (indices) indices.push(i);
+		else keyMap.set(key, [i]);
+	}
+	const take = (atom, matched) => {
+		const nodeTypeMap = typeMap.get(atom.type);
+		if (!nodeTypeMap) return -1;
+		const keyMap = nodeTypeMap.get(atom.nodeType);
+		if (!keyMap) return -1;
+		const indices = keyMap.get(atom.key);
+		if (!indices || !indices.length) return -1;
+		let cursor = cursorMap.get(indices) ?? 0;
+		while (cursor < indices.length) {
+			const index = indices[cursor];
+			cursor++;
+			if (!matched[index]) {
+				cursorMap.set(indices, cursor);
+				return index;
+			}
+		}
+		cursorMap.set(indices, cursor);
+		return -1;
+	};
+	return { take };
+}
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
 	const commits = [];
-	while (newAtom) {
-		oldAtom = createChanges(newAtom, oldAtom, commits);
-		newAtom = newAtom.sibling;
-	}
+	const oldAtoms = [];
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		cleanView(nativeRenderer, dirtyDiffAtom, true);
+		oldAtoms.push(dirtyDiffAtom);
 		dirtyDiffAtom = dirtyDiffAtom.sibling;
 	}
+	const matched = new Array(oldAtoms.length).fill(false);
+	const matcher = createOldAtomMatcher(oldAtoms);
+	const pendingDeleteIndices = [];
+	let cursor = newAtom;
+	while (cursor) {
+		const matchedIndex = matcher.take(cursor, matched);
+		if (matchedIndex >= 0) {
+			matched[matchedIndex] = true;
+			commits.push({
+				dirtyAtom: oldAtoms[matchedIndex],
+				newAtom: cursor
+			});
+		} else commits.push({
+			dirtyAtom: null,
+			newAtom: cursor
+		});
+		cursor = cursor.sibling;
+	}
+	for (let i = 0; i < oldAtoms.length; i++) if (!matched[i]) {
+		pendingDeleteIndices.push(i);
+		cleanView(nativeRenderer, oldAtoms[i], true);
+	}
 	let offset = 0;
+	let pendingDeleteCursor = 0;
 	const len = commits.length;
 	for (let i = 0; i < len; i++) {
-		while (oldAtom) {
-			if (oldAtom.index <= i) {
+		while (pendingDeleteCursor < pendingDeleteIndices.length) {
+			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
 				offset--;
-				oldAtom = oldAtom.sibling;
+				pendingDeleteCursor++;
 				continue;
 			}
 			break;
@@ -2330,29 +2399,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
 		}
 	}
 }
-function createChanges(newAtom, oldAtom, commits) {
-	const startDiffAtom = oldAtom;
-	let prev = null;
-	while (oldAtom) {
-		if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
-			commits.push({
-				dirtyAtom: oldAtom,
-				newAtom
-			});
-			const next = oldAtom.sibling;
-			if (!prev) return next;
-			prev.sibling = next;
-			return startDiffAtom;
-		}
-		prev = oldAtom;
-		oldAtom = oldAtom.sibling;
-	}
-	commits.push({
-		dirtyAtom: null,
-		newAtom
-	});
-	return startDiffAtom;
-}
 function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
 	const nativeNode = oldAtom.nativeNode;
 	newAtom.nativeNode = nativeNode;
@@ -2451,9 +2497,12 @@ function cleanView(nativeRenderer, atom, needClean) {
 	}
 	if (atom.type === ElementAtomType) {
 		const record = nativeNodeRefRecord.get(atom);
-		if (record) record.forEach((fn) => {
-			if (typeof fn === "function") fn();
-		});
+		if (record) {
+			nativeNodeRefRecord.delete(atom);
+			record.forEach((fn) => {
+				if (typeof fn === "function") fn();
+			});
+		}
 	}
 	cleanChildren(atom, nativeRenderer, needClean);
 }
@@ -2542,7 +2591,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	for (const key in props) {
+	const propKeys = Object.keys(props);
+	const propKeyLen = propKeys.length;
+	for (let i = 0; i < propKeyLen; i++) {
+		const key = propKeys[i];
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2577,9 +2629,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	});
 	context.host = nativeNode;
 	context.isParent = false;
-	const refEffects = /* @__PURE__ */ new Map();
-	nativeNodeRefRecord.set(atom, refEffects);
-	applyRefs(bindingRefs, nativeNode, refEffects);
+	if (bindingRefs) {
+		const refEffects = /* @__PURE__ */ new Map();
+		nativeNodeRefRecord.set(atom, refEffects);
+		applyRefs(bindingRefs, nativeNode, refEffects);
+	}
 }
 function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
@@ -2598,8 +2652,20 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;
 	}
+	let unBindRefs;
 	let bindRefs;
 	let updatedChildren = false;
+	const styleCache = /* @__PURE__ */ new WeakMap();
+	const toStyleObject = (style) => {
+		if (style && typeof style === "object") {
+			const cached = styleCache.get(style);
+			if (cached) return cached;
+			const normalized = styleToObject(style);
+			styleCache.set(style, normalized);
+			return normalized;
+		}
+		return styleToObject(style);
+	};
 	comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
 		if (key === "children") {
 			updatedChildren = true;
@@ -2611,14 +2677,22 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			const oldStyle = toStyleObject(oldValue);
+			const styleNames = Object.keys(oldStyle);
+			for (let i = 0; i < styleNames.length; i++) {
+				const styleName = styleNames[i];
+				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
 			if (typeof oldValue === "function") nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
 			return;
 		}
-		if (key === "ref") return;
+		if (key === "ref") {
+			unBindRefs = oldValue;
+			return;
+		}
 		nativeRenderer.removeProperty(nativeNode, key, isSvg);
 	}, (key, value) => {
 		if (key === "children") {
@@ -2632,8 +2706,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const styleObj = styleToObject(value);
-			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			const styleObj = toStyleObject(value);
+			const styleNames = Object.keys(styleObj);
+			for (let i = 0; i < styleNames.length; i++) {
+				const styleName = styleNames[i];
+				nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2661,7 +2739,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2676,17 +2754,26 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "ref") {
+			unBindRefs = oldValue;
 			bindRefs = newValue;
 			return;
 		}
 		nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
 	});
 	if (!updatedChildren) newAtom.child = oldAtom.child;
-	let refEffects = nativeNodeRefRecord.get(oldAtom);
-	if (!refEffects) refEffects = /* @__PURE__ */ new Map();
-	nativeNodeRefRecord.delete(oldAtom);
-	nativeNodeRefRecord.set(newAtom, refEffects);
-	updateRefs(bindRefs, nativeNode, refEffects);
+	if (bindRefs === unBindRefs) {
+		const refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (refEffects) {
+			nativeNodeRefRecord.delete(oldAtom);
+			nativeNodeRefRecord.set(newAtom, refEffects);
+		}
+	} else {
+		let refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (!refEffects) refEffects = /* @__PURE__ */ new Map();
+		nativeNodeRefRecord.delete(oldAtom);
+		nativeNodeRefRecord.set(newAtom, refEffects);
+		updateRefs(bindRefs, nativeNode, refEffects);
+	}
 }
 //#endregion
 //#region src/base/root.component.ts
@@ -2777,9 +2864,13 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	return { get value() {
-		return getter();
-	} };
+	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
+	watchEffect(() => {
+		internalWrite(() => {
+			proxy.value = getter();
+		});
+	});
+	return proxy;
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.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",