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

package/dist/index.esm.js

@@ -209,7 +209,7 @@ var NullInjector = class {
 * @param provider
 */
 function normalizeProvider(provider) {
-	if (provider.useValue) return normalizeValueProviderFactory(provider);
+	if (Object.prototype.hasOwnProperty.call(provider, "useValue")) return normalizeValueProviderFactory(provider);
 	if (provider.useClass) return normalizeClassProviderFactory(provider);
 	if (provider.useExisting) return normalizeExistingProviderFactory(provider);
 	if (provider.useFactory) return normalizeFactoryProviderFactory(provider);
@@ -345,13 +345,14 @@ var provideScopeError = (token) => {
 * 反射注入器
 */
 var ReflectiveInjector = class {
-	normalizedProviders;
+	normalizedProviders = /* @__PURE__ */ new Map();
 	recordValues = /* @__PURE__ */ new Map();
 	constructor(parentInjector, staticProviders, scope) {
 		this.parentInjector = parentInjector;
 		this.scope = scope;
-		this.normalizedProviders = staticProviders.map((provide) => {
-			return normalizeProvider(provide);
+		staticProviders.forEach((provide) => {
+			const normalizedProvider = normalizeProvider(provide);
+			this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 		});
 	}
 	/**
@@ -368,22 +369,20 @@ var ReflectiveInjector = class {
 			throw reflectiveInjectorErrorFn(token);
 		}
 		if (this.recordValues.has(token)) return this.recordValues.get(token);
-		for (let i = 0; i < this.normalizedProviders.length; i++) {
-			const normalizedProvider = this.normalizedProviders[i];
-			if (normalizedProvider.provide === token) return this.getValue(token, normalizedProvider);
-		}
+		const normalizedProvider = this.normalizedProviders.get(token);
+		if (normalizedProvider) return this.getValue(token, normalizedProvider);
 		if (!(token instanceof InjectionToken)) {
 			const scope = getAnnotations(token).getClassMetadata(Injectable)?.metadata.provideIn;
 			if (scope) {
 				const normalizedProvider = normalizeProvider(token);
 				if (this.scope === scope) {
-					this.normalizedProviders.push(normalizedProvider);
+					this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 					return this.getValue(token, normalizedProvider);
 				}
 				const parentInjector = this.parentInjector;
 				if (!parentInjector || parentInjector instanceof NullInjector) {
 					if (normalizedProvider.scope === "root") {
-						this.normalizedProviders.push(normalizedProvider);
+						this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 						return this.getValue(token, normalizedProvider);
 					}
 					if (notFoundValue !== THROW_IF_NOT_FOUND) return notFoundValue;
@@ -402,9 +401,8 @@ var ReflectiveInjector = class {
 	getValue(token, normalizedProvider) {
 		const { generateFactory, deps } = normalizedProvider;
 		const params = this.resolveDeps(deps);
-		let value = this.recordValues.get(token);
-		if (value) return value;
-		value = generateFactory(this, (token, value) => {
+		if (this.recordValues.has(token)) return this.recordValues.get(token);
+		const value = generateFactory(this, (token, value) => {
 			this.recordValues.set(token, value);
 		})(...params);
 		this.recordValues.set(token, value);
@@ -524,8 +522,9 @@ function hasOwn(target, key) {
 //#region src/base/dep.ts
 var Dep = class {
 	destroyCallbacks = [];
-	constructor(effect) {
+	constructor(effect, flushMode = "sync") {
 		this.effect = effect;
+		this.flushMode = flushMode;
 	}
 	destroy() {
 		this.destroyCallbacks.forEach((callback) => callback());
@@ -534,7 +533,7 @@ var Dep = class {
 };
 var deps = [];
 function getDepContext() {
-	return deps.at(-1);
+	return deps[deps.length - 1];
 }
 function pushDepContext(dep) {
 	deps.push(dep);
@@ -545,6 +544,47 @@ function popDepContext() {
 //#endregion
 //#region src/reactive/effect.ts
 var subscribers = /* @__PURE__ */ new WeakMap();
+var pendingDeps = /* @__PURE__ */ new Set();
+var isFlushScheduled = false;
+var effectErrorFn = makeError("Effect");
+function scheduleDep(dep) {
+	if (dep.flushMode === "sync") {
+		dep.effect();
+		return;
+	}
+	pendingDeps.add(dep);
+	if (!isFlushScheduled) {
+		isFlushScheduled = true;
+		queueMicrotask(flushPendingDeps);
+	}
+}
+function flushPendingDeps() {
+	try {
+		while (pendingDeps.size > 0) {
+			const deps = Array.from(pendingDeps);
+			pendingDeps.clear();
+			deps.forEach((dep) => {
+				dep.effect();
+			});
+		}
+	} finally {
+		isFlushScheduled = false;
+		if (pendingDeps.size > 0) {
+			isFlushScheduled = true;
+			queueMicrotask(flushPendingDeps);
+		}
+	}
+}
+function nextTick() {
+	return Promise.resolve();
+}
+/**
+* 同步清空响应式调度队列。
+* @internal 仅用于框架内部桥接与测试控制，不建议业务代码使用。
+*/
+function flushReactiveEffectsSync() {
+	flushPendingDeps();
+}
 function getSubscriber(target) {
 	let subscriber = subscribers.get(target);
 	if (!subscriber) {
@@ -564,9 +604,17 @@ var TriggerOpTypes = /* @__PURE__ */ function(TriggerOpTypes) {
 	TriggerOpTypes["Add"] = "Add";
 	TriggerOpTypes["Delete"] = "Delete";
 	TriggerOpTypes["Clear"] = "Clear";
+	TriggerOpTypes["Iterate"] = "Iterate";
 	return TriggerOpTypes;
 }({});
 var unKnownKey = Symbol("unKnownKey");
+function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
+	if (effects.size > 0) return;
+	record.delete(key);
+	if (record.size > 0) return;
+	subscriber.delete(type);
+	if (subscriber.size === 0) subscribers.delete(target);
+}
 function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
@@ -582,10 +630,12 @@ function track(target, type, key = unKnownKey) {
 			record.set(key, effects);
 			dep.destroyCallbacks.push(() => {
 				effects.delete(dep);
+				cleanupEmptyEffects(target, type, key, effects, record, subscriber);
 			});
 		} else if (!effects.has(dep)) {
 			dep.destroyCallbacks.push(() => {
 				effects.delete(dep);
+				cleanupEmptyEffects(target, type, key, effects, record, subscriber);
 			});
 			effects.add(dep);
 		}
@@ -594,23 +644,105 @@ function track(target, type, key = unKnownKey) {
 function runEffect(key, record) {
 	if (!record) return;
 	const effects = record.get(key);
-	if (effects) [...effects].forEach((i) => i.effect());
+	if (effects) [...effects].forEach((dep) => scheduleDep(dep));
+}
+function collectAllEffects(record, effectSet) {
+	if (!record) return;
+	record.forEach((effects) => {
+		effects.forEach((effect) => {
+			effectSet.add(effect);
+		});
+	});
 }
 function trigger(target, type, key = unKnownKey) {
-	const subscriber = getSubscriber(target);
-	if (subscriber) switch (type) {
-		case TriggerOpTypes.Set:
-			if (isArray(target)) runEffect(unKnownKey, subscriber.get(TrackOpTypes.Iterate));
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return;
+	if (isArray(target)) {
+		switch (type) {
+			case TriggerOpTypes.Set:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	if (target instanceof Map || target instanceof WeakMap) {
+		switch (type) {
+			case TriggerOpTypes.Set:
+			case TriggerOpTypes.Add:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Clear: {
+				const effects = /* @__PURE__ */ new Set();
+				collectAllEffects(subscriber.get(TrackOpTypes.Get), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Has), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Iterate), effects);
+				effects.forEach((effect) => scheduleDep(effect));
+				break;
+			}
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	if (target instanceof Set || target instanceof WeakSet) {
+		switch (type) {
+			case TriggerOpTypes.Add:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Clear: {
+				const effects = /* @__PURE__ */ new Set();
+				collectAllEffects(subscriber.get(TrackOpTypes.Get), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Has), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Iterate), effects);
+				effects.forEach((effect) => scheduleDep(effect));
+				break;
+			}
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	switch (type) {
+		case TriggerOpTypes.Add:
 			runEffect(key, subscriber.get(TrackOpTypes.Get));
 			runEffect(key, subscriber.get(TrackOpTypes.Has));
 			break;
-		case TriggerOpTypes.Add:
-		case TriggerOpTypes.Clear:
+		case TriggerOpTypes.Set:
+			runEffect(key, subscriber.get(TrackOpTypes.Get));
+			break;
 		case TriggerOpTypes.Delete:
-			runEffect(unKnownKey, subscriber.get(TrackOpTypes.Iterate));
-			runEffect(key, subscriber.get(TrackOpTypes.Has));
 			runEffect(key, subscriber.get(TrackOpTypes.Get));
+			runEffect(key, subscriber.get(TrackOpTypes.Has));
 			break;
+		case TriggerOpTypes.Iterate:
+			runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+			break;
+		default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
 	}
 }
 //#endregion
@@ -639,8 +771,8 @@ function createIterableIterator(wrapper) {
 function applyPredicateMethod(self, methodName, predicate, wrapper, thisArg) {
 	const target = toRaw(self);
 	track(target, TrackOpTypes.Iterate);
-	return target[methodName]((value, index, array) => {
-		return predicate.call(target, wrapper(value), index, array);
+	return target[methodName]((value, index) => {
+		return predicate.call(thisArg, wrapper(value), index, self);
 	}, thisArg);
 }
 function applySearchMethod(self, methodName, args) {
@@ -648,11 +780,14 @@ function applySearchMethod(self, methodName, args) {
 	track(target, TrackOpTypes.Iterate);
 	return target[methodName](...args.map(toRaw));
 }
+function triggerArrayByRange(target, startIndex, endIndex) {
+	for (; startIndex < endIndex; startIndex++) trigger(target, TriggerOpTypes.Set, startIndex + "");
+}
 function createArrayHandlers(wrapper) {
 	return {
 		concat(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
+			track(target, TrackOpTypes.Iterate);
 			return target.concat(...items);
 		},
 		every(predicate, thisArg) {
@@ -695,13 +830,23 @@ function createArrayHandlers(wrapper) {
 		},
 		pop() {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.pop();
+			const oldLength = target.length;
+			const value = target.pop();
+			const newLength = target.length;
+			if (newLength < oldLength) {
+				trigger(target, TriggerOpTypes.Set, newLength + "");
+				trigger(target, TriggerOpTypes.Set, "length");
+				trigger(target, TriggerOpTypes.Iterate);
+			}
+			return value;
 		},
 		push(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
-			return target.push(...items);
+			const oldLength = target.length;
+			const length = target.push(...items);
+			triggerArrayByRange(target, oldLength, length);
+			trigger(target, TriggerOpTypes.Iterate);
+			return length;
 		},
 		reduce(callbackFn, ...args) {
 			const target = toRaw(this);
@@ -721,18 +866,27 @@ function createArrayHandlers(wrapper) {
 		},
 		shift() {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.shift();
+			const oldLength = target.length;
+			const value = target.shift();
+			if (target.length < oldLength) {
+				triggerArrayByRange(target, 0, oldLength);
+				trigger(target, TriggerOpTypes.Set, "length");
+				trigger(target, TriggerOpTypes.Iterate);
+			}
+			return value;
 		},
 		some(predicate, thisArg) {
 			return applyPredicateMethod(this, "some", predicate, wrapper, thisArg);
 		},
-		splice(start, deleteCount) {
+		splice(start, ...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Set);
-			trigger(target, TriggerOpTypes.Add);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.splice(start, deleteCount).map((i) => wrapper(i));
+			const oldLength = target.length;
+			const deleted = target.splice(start, ...items).map((i) => wrapper(i));
+			const newLength = target.length;
+			triggerArrayByRange(target, start, Math.max(oldLength, newLength));
+			if (oldLength !== newLength) trigger(target, TriggerOpTypes.Set, "length");
+			trigger(target, TriggerOpTypes.Iterate);
+			return deleted;
 		},
 		toReversed() {
 			const target = toRaw(this);
@@ -751,8 +905,11 @@ function createArrayHandlers(wrapper) {
 		},
 		unshift(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
-			return target.unshift(...items);
+			const length = target.unshift(...items);
+			triggerArrayByRange(target, 0, length);
+			trigger(target, TriggerOpTypes.Set, "length");
+			trigger(target, TriggerOpTypes.Iterate);
+			return length;
 		},
 		[Symbol.iterator]() {
 			return this.values();
@@ -765,6 +922,7 @@ function createArrayHandlers(wrapper) {
 function createMapHandlers(wrapper) {
 	return {
 		get(key) {
+			key = toRaw(key);
 			const target = toRaw(this);
 			track(target, TrackOpTypes.Get, key);
 			return wrapper(target.get(key));
@@ -774,8 +932,11 @@ function createMapHandlers(wrapper) {
 			key = toRaw(key);
 			value = toRaw(value);
 			const has = target.has(key);
+			const oldValue = has ? target.get(key) : void 0;
+			if (has && Object.is(oldValue, value)) return this;
 			const r = target.set(key, value);
 			trigger(target, has ? TriggerOpTypes.Set : TriggerOpTypes.Add, key);
+			if (!has) trigger(target, TriggerOpTypes.Iterate);
 			return r;
 		},
 		has(key) {
@@ -789,19 +950,21 @@ function createMapHandlers(wrapper) {
 			key = toRaw(key);
 			const r = target.delete(key);
 			trigger(target, TriggerOpTypes.Delete, key);
+			if (r) trigger(target, TriggerOpTypes.Iterate);
 			return r;
 		},
 		forEach(callbackFn, thisArg) {
 			const target = toRaw(this);
-			track(target, TrackOpTypes.Iterate, void 0);
+			track(target, TrackOpTypes.Iterate);
 			target.forEach((v, k, m) => {
-				callbackFn.call(this, wrapper(v), wrapper(k), m);
+				callbackFn.call(thisArg, wrapper(v), wrapper(k), m);
 			}, thisArg);
 		},
 		clear() {
 			const target = toRaw(this);
+			if (target.size === 0) return;
 			target.clear();
-			trigger(target, TriggerOpTypes.Clear, void 0);
+			trigger(target, TriggerOpTypes.Clear);
 		},
 		[Symbol.iterator]() {
 			return this.entries();
@@ -818,16 +981,19 @@ function createSetHandlers(wrapper) {
 			value = toRaw(value);
 			if (!target.has(value)) {
 				target.add(value);
-				trigger(target, TriggerOpTypes.Add, void 0);
+				trigger(target, TriggerOpTypes.Add, value);
+				trigger(target, TriggerOpTypes.Iterate);
 			}
 			return this;
 		},
 		delete(value) {
 			const target = toRaw(this);
 			value = toRaw(value);
-			const has = target.has(value);
 			const b = target.delete(value);
-			if (!has) trigger(target, TriggerOpTypes.Delete, void 0);
+			if (b) {
+				trigger(target, TriggerOpTypes.Delete, value);
+				trigger(target, TriggerOpTypes.Iterate);
+			}
 			return b;
 		},
 		has(key) {
@@ -838,16 +1004,16 @@ function createSetHandlers(wrapper) {
 		},
 		forEach(callbackFn, thisArg) {
 			const target = toRaw(this);
-			track(target, TrackOpTypes.Iterate, void 0);
+			track(target, TrackOpTypes.Iterate);
 			target.forEach((v, k, m) => {
-				callbackFn.call(this, wrapper(v), wrapper(k), m);
+				callbackFn.call(thisArg, wrapper(v), wrapper(k), m);
 			}, thisArg);
 		},
 		clear() {
 			const target = toRaw(this);
 			if (target.size !== 0) {
 				target.clear();
-				trigger(target, TriggerOpTypes.Clear, void 0);
+				trigger(target, TriggerOpTypes.Clear);
 			}
 		},
 		[Symbol.iterator]() {
@@ -861,6 +1027,8 @@ function createSetHandlers(wrapper) {
 var reactiveErrorFn = makeError("reactive");
 var rawToProxyCache = /* @__PURE__ */ new WeakMap();
 var proxyToRawCache = /* @__PURE__ */ new WeakMap();
+var shallowRawToProxyCache = /* @__PURE__ */ new WeakMap();
+var shallowProxyToRawCache = /* @__PURE__ */ new WeakMap();
 /**
 * 将响应式对象转换为原始对象
 * @param value 响应式对象
@@ -876,6 +1044,7 @@ var proxyToRawCache = /* @__PURE__ */ new WeakMap();
 */
 function toRaw(value) {
 	if (proxyToRawCache.has(value)) return proxyToRawCache.get(value);
+	if (shallowProxyToRawCache.has(value)) return shallowProxyToRawCache.get(value);
 	return value;
 }
 /**
@@ -892,18 +1061,24 @@ function toRaw(value) {
 * ```
 */
 function isReactive(value) {
-	return proxyToRawCache.has(value);
+	return proxyToRawCache.has(value) || shallowProxyToRawCache.has(value);
+}
+var internalWriteDepth = 0;
+function isInternalWriting() {
+	return internalWriteDepth > 0;
 }
-var fromInternalWrite = false;
 /**
 * 内部写入，用于避免类型为只读的响应式对象写入报错
 * @param fn 要执行的函数
 * @internal
 */
 function internalWrite(fn) {
-	fromInternalWrite = true;
-	fn();
-	fromInternalWrite = false;
+	internalWriteDepth++;
+	try {
+		fn();
+	} finally {
+		internalWriteDepth--;
+	}
 }
 var ObjectReactiveHandler = class {
 	isShallow;
@@ -913,32 +1088,44 @@ var ObjectReactiveHandler = class {
 		this.isShallow = config.shallow;
 	}
 	set(target, p, newValue, receiver) {
-		if (this.isReadonly && !fromInternalWrite) throw reactiveErrorFn("Object is readonly!");
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
 		const rawValue = toRaw(newValue);
 		const oldValue = target[p];
 		const v = this.isShallow ? newValue : rawValue;
-		if (oldValue === rawValue) return Reflect.set(target, p, v, receiver);
+		if (Object.is(oldValue, rawValue)) return Reflect.set(target, p, v, receiver);
+		const has = hasOwn(target, p);
 		const b = Reflect.set(target, p, v, receiver);
-		fromInternalWrite = false;
-		if (hasOwn(target, p)) trigger(target, TriggerOpTypes.Set, p);
-		else trigger(target, TriggerOpTypes.Add, p);
+		if (has) trigger(target, TriggerOpTypes.Set, p);
+		else {
+			trigger(target, TriggerOpTypes.Add, p);
+			trigger(target, TriggerOpTypes.Iterate);
+		}
 		return b;
 	}
 	get(target, p, receiver) {
 		track(target, TrackOpTypes.Get, p);
 		const value = Reflect.get(target, p, receiver);
-		if (this.isShallow) return value;
+		if (this.isShallow || !value || typeof value !== "object") return value;
 		return reactive(value);
 	}
 	deleteProperty(target, p) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		const has = hasOwn(target, p);
 		const b = Reflect.deleteProperty(target, p);
-		trigger(target, TriggerOpTypes.Delete, p);
+		if (b && has) {
+			trigger(target, TriggerOpTypes.Delete, p);
+			trigger(target, TriggerOpTypes.Iterate);
+		}
 		return b;
 	}
 	ownKeys(target) {
 		track(target, TrackOpTypes.Iterate);
 		return Reflect.ownKeys(target);
 	}
+	has(target, p) {
+		track(target, TrackOpTypes.Has, p);
+		return Reflect.has(target, p);
+	}
 };
 function noReactive(v) {
 	return v;
@@ -950,8 +1137,41 @@ var ArrayReactiveHandler = class extends ObjectReactiveHandler {
 	}
 	get(target, p, receiver) {
 		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
+		if (p === "length") {
+			track(target, TrackOpTypes.Iterate);
+			return Reflect.get(target, p, receiver);
+		}
 		return super.get(target, p, receiver);
 	}
+	set(target, p, newValue, receiver) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		if (p === "length") {
+			const oldLength = target.length;
+			const b = super.set(target, p, newValue, receiver);
+			const newLength = target.length;
+			if (newLength < oldLength) triggerArrayByRange(target, newLength, oldLength);
+			if (oldLength !== newLength) trigger(target, TriggerOpTypes.Iterate);
+			return b;
+		}
+		const rawValue = toRaw(newValue);
+		const oldValue = target[p];
+		const v = this.isShallow ? newValue : rawValue;
+		if (Object.is(oldValue, rawValue)) return Reflect.set(target, p, v, receiver);
+		const oldLength = target.length;
+		const b = Reflect.set(target, p, v, receiver);
+		const newLength = target.length;
+		trigger(target, TriggerOpTypes.Set, p);
+		trigger(target, TriggerOpTypes.Iterate);
+		if (newLength > oldLength) trigger(target, TriggerOpTypes.Set, "length");
+		return b;
+	}
+	deleteProperty(target, p) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		const has = hasOwn(target, p);
+		const b = Reflect.deleteProperty(target, p);
+		if (b && has) trigger(target, TriggerOpTypes.Delete, p);
+		return b;
+	}
 };
 var MapReactiveHandler = class extends ObjectReactiveHandler {
 	interceptors = createMapHandlers(this.isShallow ? noReactive : reactive);
@@ -961,7 +1181,7 @@ var MapReactiveHandler = class extends ObjectReactiveHandler {
 	get(target, p, receiver) {
 		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
 		if (p === "size") {
-			track(target, TrackOpTypes.Iterate, p);
+			track(target, TrackOpTypes.Iterate);
 			return Reflect.get(target, p);
 		}
 		return super.get(target, p, receiver);
@@ -975,7 +1195,7 @@ var SetReactiveHandler = class extends ObjectReactiveHandler {
 	get(target, p, receiver) {
 		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
 		if (p === "size") {
-			track(target, TrackOpTypes.Iterate, p);
+			track(target, TrackOpTypes.Iterate);
 			return Reflect.get(target, p);
 		}
 		return super.get(target, p, receiver);
@@ -1051,29 +1271,10 @@ function reactive(raw) {
 }
 //#endregion
 //#region src/base/_utils.ts
-function hasChange(newProps, oldProps) {
-	const newKeys = Object.keys(oldProps);
-	const oldKeys = Object.keys(newProps);
-	if (oldKeys.length !== newKeys.length) return true;
-	const len = oldKeys.length;
-	for (let i = 0; i < len; i++) {
-		const key = newKeys[i];
-		if (newProps[key] !== oldProps[key]) return true;
-	}
-	return false;
-}
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
-	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]);
-	}
+	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]);
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -1127,6 +1328,30 @@ var refErrorFn = makeError("Ref");
 *   }
 * }
 * ```
+* @example
+* ```tsx
+* function Child() {
+*   return {
+*     show() {
+*       console.log('show')
+*     },
+*     render() {
+*       return <div>child</div>
+*     }
+*   }
+* }
+* function App() {
+*   const ref = createDynamicRef<typeof Child>((child) => {
+*     child.show()
+*     return () => {
+*       console.log('destroy')
+*     }
+*   })
+*   return () => {
+*     return <Child ref={ref}/>
+*   }
+* }
+* ```
 */
 function createDynamicRef(effect) {
 	return effect;
@@ -1147,6 +1372,28 @@ function createDynamicRef(effect) {
 *   }
 * }
 * ```
+* @example
+* ```tsx
+* function Child() {
+*   return {
+*     show() {
+*       console.log('show')
+*     },
+*     render() {
+*       return <div>child</div>
+*     }
+*   }
+* }
+* function App() {
+*   const ref = createRef<typeof Child>()
+*   onMounted(() => {
+*      ref.value?.show()
+*   })
+*   return () => {
+*     return <Child ref={ref}/>
+*   }
+* }
+* ```
 */
 function createRef() {
 	return createShallowReadonlyProxy({ value: null });
@@ -1236,7 +1483,7 @@ var Component = class {
 		this.refEffects = /* @__PURE__ */ new Map();
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
-		});
+		}, "sync");
 	}
 	markAsDirtied() {
 		this._dirty = true;
@@ -1252,7 +1499,7 @@ var Component = class {
 		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		const isRenderFn = typeof render === "function";
-		this.instance = isRenderFn ? { $render: render } : render;
+		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
 			applyRefs(this.props.ref, this.instance, this.refEffects);
 			return () => {
@@ -1263,15 +1510,16 @@ var Component = class {
 		});
 		componentSetupStack.pop();
 		pushDepContext(this.listener);
-		const template = this.instance.$render();
+		const template = this.instance.render();
 		popDepContext();
-		update(template, this.instance.$portalHost);
+		update(template);
 		this.rendered();
 	}
 	updateProps(newProps) {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
+		updateRefs(newRefs, this.instance, this.refEffects);
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1285,12 +1533,11 @@ var Component = class {
 				this.props[key] = value;
 			});
 		});
-		updateRefs(newRefs, this.instance, this.refEffects);
 	}
 	rerender() {
 		this.listener.destroy();
 		pushDepContext(this.listener);
-		const template = this.instance.$render();
+		const template = this.instance.render();
 		popDepContext();
 		return template;
 	}
@@ -1373,6 +1620,18 @@ function registryComponentDestroyCallback(fn) {
 	}
 }
 //#endregion
+//#region src/base/_render-context.ts
+var containerStack = [];
+function pushContainer(container) {
+	containerStack.push(container);
+}
+function popContainer() {
+	containerStack.pop();
+}
+function getContainer() {
+	return containerStack[containerStack.length - 1];
+}
+//#endregion
 //#region src/base/jsx-element.ts
 function Fragment(props) {
 	return () => {
@@ -1410,8 +1669,8 @@ function withMark(marks, setup) {
 		if (typeof componentRenderFn === "function") return function() {
 			return applyMark(marks, componentRenderFn);
 		};
-		const oldRender = componentRenderFn.$render;
-		componentRenderFn.$render = function() {
+		const oldRender = componentRenderFn.render;
+		componentRenderFn.render = function() {
 			return applyMark(marks, () => {
 				return oldRender.call(componentRenderFn);
 			});
@@ -1450,7 +1709,7 @@ function applyMark(mark, render) {
 *   return () => {
 *     return (
 *       <div>
-*         <Portal host={modal}>
+*         <Portal container={modal}>
 *           这里的内容将渲染到 modal 节点
 *         </Portal>
 *       </div>
@@ -1460,12 +1719,10 @@ function applyMark(mark, render) {
 * ```
 */
 function Portal(props) {
-	return {
-		$portalHost: props.host,
-		$render() {
-			return props.children;
-		}
-	};
+	return { render() {
+		pushContainer(props.container);
+		return props.children;
+	} };
 }
 //#endregion
 //#region src/reactive/watch-effect.ts
@@ -1478,12 +1735,18 @@ function Portal(props) {
 function watchEffect(effect) {
 	const dep = new Dep(function() {
 		pushDepContext(dep);
+		try {
+			effect();
+		} finally {
+			popDepContext();
+		}
+	}, "async");
+	pushDepContext(dep);
+	try {
 		effect();
+	} finally {
 		popDepContext();
-	});
-	pushDepContext(dep);
-	effect();
-	popDepContext();
+	}
 	function unWatch() {
 		dep.destroy();
 	}
@@ -1508,7 +1771,7 @@ function watch(trigger, callback) {
 			return;
 		}
 		const newValue = trigger();
-		if (newValue !== oldValue) {
+		if (!Object.is(newValue, oldValue)) {
 			callback(newValue, oldValue);
 			oldValue = newValue;
 		}
@@ -1673,7 +1936,7 @@ var listenerReg = /^on[A-Z]/;
 var nativeNodeRefRecord = /* @__PURE__ */ new WeakMap();
 function createRenderer(component, nativeRenderer, namespace) {
 	let isInit = true;
-	return function render(host) {
+	return function render(container) {
 		if (isInit) {
 			isInit = false;
 			componentRender(nativeRenderer, component, {
@@ -1687,8 +1950,8 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				host,
-				rootHost: host
+				anchorNode: container,
+				rootContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
 	};
@@ -1710,23 +1973,40 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	newAtom.child = createChildChain(component.rerender(), nativeRenderer, newAtom.namespace);
+	const oldContainer = component.viewMetadata.anchorNode;
+	const expectContainer = component.viewMetadata.expectContainer;
+	const newTemplate = component.rerender();
+	const portalContainer = getContainer();
+	popContainer();
+	if (portalContainer && portalContainer !== expectContainer) context = {
+		isParent: true,
+		anchorNode: portalContainer,
+		rootContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: newAtom,
+		expectContainer,
+		...context
+	};
+	if (oldContainer !== context.anchorNode) needMove = true;
+	newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
 	diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
+	return context;
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 	if (component.dirty) {
-		const { atom, host, isParent, rootHost } = component.viewMetadata;
+		const { atom, anchorNode, isParent, rootContainer } = component.viewMetadata;
 		const context = {
-			host,
+			anchorNode,
 			isParent,
-			rootHost
+			rootContainer
 		};
 		const diffAtom = atom.child;
 		patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
 		const next = atom.sibling;
 		if (next && next.jsxNode instanceof Component) {
 			const view = next.jsxNode.viewMetadata;
-			view.host = context.host;
+			view.anchorNode = context.anchorNode;
 			view.isParent = context.isParent;
 		}
 		component.rendered();
@@ -1737,85 +2017,24 @@ 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 = [];
-	const oldAtoms = [];
+	while (newAtom) {
+		oldAtom = createChanges(newAtom, oldAtom, commits);
+		newAtom = newAtom.sibling;
+	}
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		oldAtoms.push(dirtyDiffAtom);
+		cleanView(nativeRenderer, dirtyDiffAtom, true);
 		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 (pendingDeleteCursor < pendingDeleteIndices.length) {
-			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
+		while (oldAtom) {
+			if (oldAtom.index <= i) {
 				offset--;
-				pendingDeleteCursor++;
+				oldAtom = oldAtom.sibling;
 				continue;
 			}
 			break;
@@ -1838,51 +2057,68 @@ 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;
 	if (needMove || newAtom.index - offset !== oldAtom.index) insertNode(nativeRenderer, newAtom, context);
-	context.host = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 }
 function updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, oldAtom) {
 	const nativeNode = oldAtom.nativeNode;
 	newAtom.nativeNode = nativeNode;
 	if (needMove || newAtom.index - offset !== oldAtom.index) insertNode(nativeRenderer, newAtom, context);
-	context.host = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-		host: nativeNode,
+		anchorNode: nativeNode,
 		isParent: true,
-		rootHost: context.rootHost
+		rootContainer: context.rootContainer
 	});
 }
 function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
 	const component = oldAtom.jsxNode;
-	const portalHost = component.instance.$portalHost;
-	context = portalHost ? {
-		isParent: true,
-		host: portalHost,
-		rootHost: portalHost
-	} : context;
-	component.viewMetadata = {
-		atom: newAtom,
-		...context
-	};
 	const newProps = newAtom.jsxNode.props;
 	newAtom.jsxNode = component;
 	needMove = needMove || newAtom.index - offset !== oldAtom.index;
-	const propsIsChanged = hasChange(newProps, component.props);
-	if (propsIsChanged) component.updateProps(newProps);
-	if (propsIsChanged || component.dirty) {
-		patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
+	component.updateProps(newProps);
+	if (component.dirty) {
+		const updatedContext = patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
 		const next = oldAtom.sibling;
 		if (next && next.jsxNode instanceof Component) {
 			const view = next.jsxNode.viewMetadata;
-			view.host = context.host;
-			view.isParent = context.isParent;
+			view.anchorNode = updatedContext.anchorNode;
+			view.isParent = updatedContext.isParent;
 		}
 	} else {
+		component.viewMetadata = {
+			atom: newAtom,
+			expectContainer: component.viewMetadata.expectContainer,
+			...context
+		};
 		newAtom.child = oldAtom.child;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !component.changedSubComponents.size);
 	}
@@ -1898,7 +2134,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
 			if (moveView) insertNode(nativeRenderer, atom, context);
 			if (!skipSubComponentDiff) reuseElementChildrenView(nativeRenderer, atom, context);
 			context.isParent = false;
-			context.host = atom.nativeNode;
+			context.anchorNode = atom.nativeNode;
 		}
 	};
 	while (child) {
@@ -1925,7 +2161,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
 	if (atom.type === ComponentAtomType) {
 		const jsxNode = atom.jsxNode;
-		if (jsxNode.instance.$portalHost) needClean = true;
+		if (jsxNode.viewMetadata.anchorNode !== jsxNode.viewMetadata.expectContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -1953,15 +2189,19 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template, portalHost) => {
+	component.render((template) => {
+		const portalContainer = getContainer();
+		popContainer();
 		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		context = portalHost ? {
+		const expectContainer = context.anchorNode;
+		context = portalContainer && portalContainer !== context.anchorNode ? {
 			isParent: true,
-			host: portalHost,
-			rootHost: portalHost
+			anchorNode: portalContainer,
+			rootContainer: portalContainer
 		} : context;
 		component.viewMetadata = {
 			atom: from,
+			expectContainer,
 			...context
 		};
 		let child = from.child;
@@ -2018,9 +2258,9 @@ function createChildChain(template, nativeRenderer, namespace) {
 	return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
-	if (context.isParent) if (context.host === context.rootHost) nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
-	else nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
-	else nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
+	if (context.isParent) if (context.anchorNode === context.rootContainer) nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.prependChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
 	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
@@ -2030,10 +2270,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	const propKeys = Object.keys(props);
-	const propKeyLen = propKeys.length;
-	for (let i = 0; i < propKeyLen; i++) {
-		const key = propKeys[i];
+	for (const key in props) {
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2063,10 +2300,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		host: nativeNode,
-		rootHost: context.rootHost
+		anchorNode: nativeNode,
+		rootContainer: context.rootContainer
 	});
-	context.host = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2078,7 +2315,7 @@ function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
 	atom.nativeNode = nativeNode;
 	insertNode(nativeRenderer, atom, context);
-	context.host = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
@@ -2087,6 +2324,11 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 	const nativeNode = newAtom.nativeNode;
 	const oldVNode = oldAtom.jsxNode;
 	if (newVNode === oldVNode) {
+		const refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (refEffects) {
+			nativeNodeRefRecord.delete(oldAtom);
+			nativeNodeRefRecord.set(newAtom, refEffects);
+		}
 		newAtom.child = oldAtom.child;
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;
@@ -2094,17 +2336,6 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 	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;
@@ -2116,12 +2347,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			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);
-			}
+			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2145,12 +2371,8 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			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);
-			}
+			const styleObj = styleToObject(value);
+			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2178,7 +2400,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2237,7 +2459,7 @@ function viewfly(config) {
 	const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
 	const modules = [];
 	let destroyed = false;
-	let appHost = null;
+	let appContainer = null;
 	const rootProviders = [];
 	const rootComponent = new RootComponent(() => {
 		const rootContext = createContext(rootProviders, null, context);
@@ -2247,7 +2469,7 @@ function viewfly(config) {
 	}, function() {
 		if (destroyed || !autoUpdate) return;
 		nextTick(() => {
-			render(appHost);
+			render(appContainer);
 		});
 	});
 	const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
@@ -2271,18 +2493,22 @@ function viewfly(config) {
 			else modules.push(module);
 			return app;
 		},
-		mount(host) {
+		mount(container) {
 			if (isStarted) throw viewflyErrorFn("application has already started.");
 			for (const module of modules) module.setup?.(app);
 			isStarted = true;
-			appHost = host;
-			render(host);
+			appContainer = container;
+			render(container);
 			for (const module of modules) module.onAfterStartup?.(app);
 			if (!autoUpdate) return app;
 			return app;
 		},
 		render() {
-			if (appHost) render(appHost);
+			if (appContainer) {
+				flushReactiveEffectsSync();
+				render(appContainer);
+				flushReactiveEffectsSync();
+			}
 			return app;
 		},
 		destroy() {
@@ -2303,13 +2529,31 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
-	watchEffect(() => {
-		internalWrite(() => {
-			proxy.value = getter();
-		});
+	let cacheValue;
+	let dirty = true;
+	const target = { get value() {
+		if (dirty) {
+			dep.destroy();
+			pushDepContext(dep);
+			try {
+				cacheValue = getter();
+				dirty = false;
+			} finally {
+				popDepContext();
+			}
+		}
+		return cacheValue;
+	} };
+	const dep = new Dep(() => {
+		if (!dirty) {
+			dirty = true;
+			trigger(target, TriggerOpTypes.Set, "value");
+		}
+	}, "sync");
+	registryComponentDestroyCallback(() => {
+		dep.destroy();
 	});
-	return proxy;
+	return new Proxy(target, readonlyProxyHandler);
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts
@@ -2331,7 +2575,7 @@ var defaultShallowSetReactiveHandler = new SetReactiveHandler({
 });
 function shallowReactive(raw) {
 	if (isReactive(raw)) return raw;
-	let proxy = rawToProxyCache.get(raw);
+	let proxy = shallowRawToProxyCache.get(raw);
 	if (proxy) return proxy;
 	switch (getStringType(raw)) {
 		case "[object Object]":
@@ -2350,8 +2594,8 @@ function shallowReactive(raw) {
 			break;
 		default: return raw;
 	}
-	rawToProxyCache.set(raw, proxy);
-	proxyToRawCache.set(proxy, raw);
+	shallowRawToProxyCache.set(raw, proxy);
+	shallowProxyToRawCache.set(proxy, raw);
 	return proxy;
 }
 //#endregion
@@ -2390,4 +2634,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, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, 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, 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 };