compelem 0.20.0-b2 → 0.20.0

package/compelem.umd.js

@@ -1,5 +1,5 @@
 /**
-   * compelem v0.20.0-b2.1772633551
+   * compelem v0.20.0.1773502279
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * git+https://github.com/holyhigh2/compelem.git
@@ -14,29 +14,6 @@
 
     var myfx__default = /*#__PURE__*/_interopDefaultLegacy(myfx);
 
-    /**
-     * 样式模板
-     * @author holyhigh2
-     */
-    class CssTemplate {
-        strings;
-        vars;
-        constructor(strings, vars) {
-            this.strings = myfx.concat(strings);
-            this.vars = vars;
-        }
-        getCss(comp) {
-            let str = '';
-            this.strings.forEach((s, i) => {
-                str = str + s + (this.vars[i] ?? '');
-            });
-            return str;
-        }
-        destroy() {
-            this.strings = this.vars = null;
-        }
-    }
-
     const SLOT_NAME_DEFAULT = 'default';
     /**
      * 共享内容
@@ -55,14 +32,26 @@
     })(Mode || (Mode = {}));
     const DefinitionCompEventMap = new Map();
     const DefinitionTagMap = {};
-    const DefinitionWatchMap = new Map();
-    const DefinitionComputedMap = new Map();
-    const DefinitionStateMap = new Map();
-    const DefinitionPropMap = new Map();
+    const DefinitionComputedMap = new WeakMap();
+    const DefinitionStateMap = new WeakMap();
+    const DefinitionPropMap = new WeakMap();
     const DefinitionDecoratorMap = new Map();
     const ObservedAttrsMap = new Map();
+    const WatchKeysOnceMap = new WeakMap();
+    const WatchKeysDeepListMap = new WeakMap();
+    const WatchKeysListMap = new WeakMap();
+    const WatchUpdateMap = new WeakMap();
+    const WatchDeepUpdateMap = new WeakMap();
+    const WatchImmediateListMap = new WeakMap();
+    const PropSyncKeySetMap = new WeakMap();
+    const StateShallowKeySetMap = new WeakMap();
+    const HasChangedPropOrStateMap = new WeakMap();
+    const ComputedUpdateDepsMap = new WeakMap();
+    const CssUpdateDepsMap = new WeakMap();
     const ComponentDynamicCssUpdaterMap = new WeakMap();
     const PATH_SEPARATOR = '-';
+    const PROP_NAME_SLOTS$1 = 'slots';
+    const DATA_KEY = '__data_';
 
     function showError(msg) {
         console.error(`[CompElem]`, msg);
@@ -154,6 +143,303 @@
         return documentFragment ? documentFragment.host : undefined;
     }
 
+    /**
+     * 用于提供全局state状态管理
+     * @author holyhigh2
+     */
+    function getterValue(getter, propertyKey, context) {
+        let thisHost = context;
+        let v = getter ? getter.call(thisHost) : Reflect.get(thisHost[DATA_KEY], propertyKey);
+        if (Collector.__collecting) {
+            Collector.__varPathList.push(propertyKey);
+        }
+        if (PROXY_MAP.has(v)) {
+            let contextList = EXTRA_CONTEXT_OF_VAR.get(v);
+            if (!contextList) {
+                contextList = new Set();
+                EXTRA_CONTEXT_OF_VAR.set(v, contextList);
+            }
+            contextList.add(thisHost.__thisRef);
+            return PROXY_MAP.get(v);
+        }
+        if (myfx.isObject(v) && !myfx.isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
+            let keySet = StateShallowKeySetMap.get(thisHost.constructor);
+            let shallow = keySet?.has(propertyKey);
+            v = shallow || propertyKey === PROP_NAME_SLOTS$1 ? v : reactive(v, thisHost, propertyKey);
+        }
+        return v;
+    }
+    function setterValue(propertyKey, v, context) {
+        let thisHost = context;
+        if (!thisHost.__inited) {
+            Reflect.set(thisHost[DATA_KEY], propertyKey, v);
+            return;
+        }
+        let oldValue = thisHost[DATA_KEY][propertyKey];
+        let stateMap = HasChangedPropOrStateMap.get(thisHost.constructor);
+        let hasChanged = stateMap?.get(propertyKey);
+        if (hasChanged) {
+            if (!hasChanged.call(thisHost, v, oldValue, [propertyKey], v, oldValue))
+                return true;
+        }
+        else {
+            //默认对比算法
+            if (Object.is(oldValue, v)) {
+                return true;
+            }
+        }
+        //check watch
+        requestWatchUpdate(thisHost, v, oldValue, propertyKey);
+        //check computed
+        requestComputedUpdate(thisHost, propertyKey);
+        //check css
+        requestCssUpdate(thisHost, propertyKey);
+        Reflect.set(thisHost[DATA_KEY], propertyKey, v);
+        thisHost._notify(oldValue, [propertyKey]);
+        //update sync
+        let syncKeySet = PropSyncKeySetMap.get(thisHost.constructor);
+        if (syncKeySet?.has(propertyKey)) {
+            thisHost.emit('update' + ":" + propertyKey, { value: v });
+        }
+    }
+    function requestWatchUpdate(context, newValue, oldValue, fullPath, rootObjNew, rootObjOld) {
+        let superComp = _getSuper(context.constructor);
+        let watchKeys = WatchKeysListMap.get(context.constructor) ?? WatchKeysListMap.get(superComp);
+        let watchKeysDeep = WatchKeysDeepListMap.get(context.constructor) ?? WatchKeysDeepListMap.get(superComp);
+        let watchDeepUpdateMap = WatchDeepUpdateMap.get(context.constructor) ?? WatchDeepUpdateMap.get(superComp);
+        let watchUpdateMap = WatchUpdateMap.get(context.constructor) ?? WatchUpdateMap.get(superComp);
+        let onceMap = WatchKeysOnceMap.get(context.constructor) ?? WatchKeysOnceMap.get(superComp);
+        watchKeys?.forEach(wk => {
+            if (fullPath === wk ||
+                (myfx.startsWith(wk, fullPath + '.') && !Object.is(myfx.get(context._getPrivateData(), wk), myfx.get(newValue, wk))) ||
+                (myfx.startsWith(fullPath, wk + '.') && watchKeysDeep?.includes(wk) && !Object.is(myfx.get(context._getPrivateData(), wk), myfx.get(newValue, wk)))) {
+                myfx.concat(myfx.toArray(watchUpdateMap[wk]), myfx.toArray(watchDeepUpdateMap[wk])).forEach(fn => {
+                    if (!fn)
+                        return;
+                    if (onceMap.get(wk) === true)
+                        return;
+                    context._watchUpdateArgsInNextTick.set(fn, {
+                        newValue, oldValue, chain: fullPath.split('.'), rootObjNew, rootObjOld, fullMatch: wk === fullPath
+                    });
+                    context._watchUpdateSetInNextTick.add(fn);
+                    if (onceMap.has(wk))
+                        onceMap.set(wk, true);
+                });
+            }
+        });
+    }
+    function requestComputedUpdate(context, fullPath) {
+        let depMap = ComputedUpdateDepsMap.get(context.constructor);
+        if (depMap?.has(fullPath)) {
+            depMap.get(fullPath)?.forEach(fn => {
+                context._computedUpdateSetInNextTick.add(fn);
+            });
+        }
+    }
+    function requestCssUpdate(context, fullPath) {
+        let deps = CssUpdateDepsMap.get(context.constructor);
+        if (!deps)
+            return;
+        let pathChain = fullPath.split('.');
+        let path = '';
+        pathChain.forEach(p => {
+            path = path ? path + '.' + p : p;
+            if (deps.has(path)) {
+                context._cssUpdateInNextTick = true;
+            }
+        });
+    }
+    const Collector = {
+        popDirectiveQ() {
+            let rs = this.__varPathList.reduceRight((acc, p) => {
+                if (!acc.includes(p)) {
+                    acc.unshift(p);
+                }
+                return acc;
+            }, []);
+            return rs;
+        },
+        start() {
+            this.__collecting = true;
+            this.__varPathList = [];
+        },
+        end(renderComponent, up) {
+            if (renderComponent && up) {
+                renderComponent._regSubViewDeps(Collector.popVarPathList(), up);
+            }
+            this.__collecting = false;
+        },
+        popVarPathList() {
+            let rs = Array.from(new Set(this.__varPathList));
+            this.__varPathList = [];
+            return rs;
+        },
+        __varPathList: [],
+        __collecting: false,
+    };
+    //对象值在不同上下文的根路径
+    const OBJECT_VAR_ROOT_PATH_IN_CONTEXT = new WeakMap();
+    const OBJECT_VAR_PATH = new WeakMap();
+    //缓存已经创建的proxy对象
+    const PROXY_MAP = new WeakMap();
+    //对象值的创建上下文
+    const OBJECT_VAR_ROOT_CONTEXT = new WeakMap();
+    //上级对象所在的扩展context
+    const EXTRA_CONTEXT_OF_VAR = new WeakMap();
+    function reactive(obj, context, rootProp) {
+        if (PROXY_MAP.has(obj))
+            return PROXY_MAP.get(obj);
+        if (OBJECT_VAR_ROOT_CONTEXT.has(obj)) {
+            if (rootProp) {
+                let pathMap = OBJECT_VAR_ROOT_PATH_IN_CONTEXT.get(context);
+                if (!pathMap) {
+                    pathMap = new WeakMap();
+                    OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
+                }
+                pathMap.set(obj, rootProp);
+                let contextList = EXTRA_CONTEXT_OF_VAR.get(obj);
+                if (!contextList) {
+                    contextList = new Set();
+                    EXTRA_CONTEXT_OF_VAR.set(obj, contextList);
+                }
+                if (!contextList.values().some(v => v.deref() === context)) {
+                    contextList.add(new WeakRef(context));
+                }
+            }
+            return obj;
+        }
+        const proxyObject = new Proxy(obj, {
+            get(target, prop, receiver) {
+                if (!prop)
+                    return undefined;
+                const value = Reflect.get(target, prop, receiver);
+                if (myfx.isSymbol(prop))
+                    return value;
+                if (myfx.isFunction(value))
+                    return value;
+                if (prop === 'length' && myfx.isArray(target))
+                    return value;
+                if (Collector.__collecting) {
+                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
+                    supPath.push(prop);
+                    let propPath = supPath.join('.');
+                    Collector.__varPathList.push(propPath);
+                }
+                if (PROXY_MAP.has(value))
+                    return PROXY_MAP.get(value);
+                let reactiveVal = value;
+                if (myfx.isObject(value) && !myfx.isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
+                    reactiveVal = reactive(value, context);
+                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
+                    supPath.push(prop);
+                    OBJECT_VAR_PATH.set(reactiveVal, supPath);
+                    PROXY_MAP.set(value, reactiveVal);
+                }
+                return reactiveVal;
+            },
+            set(target, prop, newValue, receiver) {
+                if (!prop)
+                    return false;
+                let ov = target[prop];
+                let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
+                let subChain = myfx.concat(chain, [prop]);
+                let stateMap = HasChangedPropOrStateMap.get(context.constructor);
+                let hasChanged = stateMap?.get(subChain[0]);
+                let moreThan1 = subChain.length > 1;
+                let rootObjNew = newValue;
+                let rootObjOld = ov;
+                if (moreThan1) {
+                    rootObjOld = rootObjNew = context._getPrivateData()[subChain[0]];
+                }
+                if (hasChanged) {
+                    if (!hasChanged.call(context, rootObjNew, rootObjOld, subChain, newValue, ov))
+                        return true;
+                }
+                else {
+                    //默认对比算法
+                    if (Object.is(ov, newValue)) {
+                        return true;
+                    }
+                }
+                let nv = newValue;
+                let rs = Reflect.set(target, prop, nv);
+                let extraContext = EXTRA_CONTEXT_OF_VAR.get(receiver);
+                let k = subChain.join('.');
+                //check watch
+                requestWatchUpdate(context, nv, ov, k, rootObjNew, rootObjOld);
+                //check computed
+                requestComputedUpdate(context, k);
+                //check css
+                requestCssUpdate(context, k);
+                notifyUpdate(context, rootObjOld, subChain);
+                extraContext?.forEach(ctxRef => {
+                    let ctx = ctxRef.deref();
+                    if (!ctx)
+                        return;
+                    let ctxRootPath = ctx._wrapperProp[subChain[0]];
+                    let ck = subChain.join('.');
+                    ck = ck.replace(subChain[0], ctxRootPath);
+                    //check watch
+                    requestWatchUpdate(ctx, nv, ov, ck);
+                    //check computed
+                    requestComputedUpdate(ctx, ck);
+                    //check css
+                    requestCssUpdate(ctx, ck);
+                    notifyUpdate(ctx, rootObjOld, ck.split('.'));
+                });
+                return rs;
+            }
+        });
+        if (!OBJECT_VAR_PATH.has(proxyObject)) {
+            OBJECT_VAR_PATH.set(proxyObject, rootProp ? [rootProp] : []);
+        }
+        PROXY_MAP.set(obj, proxyObject);
+        if (rootProp) {
+            OBJECT_VAR_ROOT_CONTEXT.set(proxyObject, context);
+            if (!OBJECT_VAR_ROOT_PATH_IN_CONTEXT.has(context)) {
+                let pathMap = new WeakMap();
+                pathMap.set(proxyObject, rootProp);
+                OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
+            }
+        }
+        return proxyObject;
+    }
+    function notifyUpdate(context, oldValue, path, subNewValue, subOldValue) {
+        let i = myfx.size(path);
+        myfx.eachRight(path, (p) => {
+            let varPath = myfx.slice(path, 0, i--);
+            context._notify(oldValue, varPath);
+        });
+    }
+    const QMap = new Map();
+    class Queue {
+        static nextSet = new Set();
+        static nextPending = false;
+        static next;
+        static flush() {
+            Queue.nextPending = false;
+            let nq = Array.from(Queue.nextSet);
+            Queue.nextSet.clear();
+            QMap.clear();
+            nq.forEach(u => u());
+            nq = null;
+        }
+        static pushNext(updater) {
+            Queue.nextSet.add(updater);
+            if (!Queue.nextPending) {
+                Queue.nextPending = true;
+                Queue.next();
+            }
+        }
+    }
+    (() => {
+        const p = Promise.resolve();
+        const nextFn = Queue.flush;
+        Queue.next = () => {
+            p.then(nextFn);
+        };
+    })();
+
     function prop(options) {
         if (arguments.length === 1) {
             return (target, propertyKey, descriptor) => {
@@ -175,11 +461,11 @@
             showError(`Prop '${propertyKey}' must be in CamelCase`);
         }
         let attrSet;
-        if (!DefinitionPropMap.has(target.constructor.name)) {
+        if (!DefinitionPropMap.has(target.constructor)) {
             const mixinProps = {};
             let parentCtor = target.constructor;
             while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                myfx.merge(mixinProps, DefinitionPropMap.get(parentCtor.name) ?? {});
+                myfx.merge(mixinProps, DefinitionPropMap.get(parentCtor) ?? {});
             }
             attrSet = new Set();
             myfx.each(mixinProps, (v, k) => {
@@ -188,8 +474,8 @@
                     attrSet?.add(kbb);
                 }
             });
-            ObservedAttrsMap.set(target.constructor.name, attrSet);
-            DefinitionPropMap.set(target.constructor.name, mixinProps);
+            ObservedAttrsMap.set(target.constructor, attrSet);
+            DefinitionPropMap.set(target.constructor, mixinProps);
         }
         if (descriptor) {
             if (descriptor.get)
@@ -199,7 +485,7 @@
         }
         if (options.attribute) {
             if (!attrSet) {
-                attrSet = ObservedAttrsMap.get(target.constructor.name);
+                attrSet = ObservedAttrsMap.get(target.constructor);
             }
             let kbb = myfx.kebabCase(propertyKey);
             attrSet?.add(kbb);
@@ -210,12 +496,43 @@
         }
         if (attrSet)
             target.constructor.observedAttributes = myfx.toArray(attrSet);
-        myfx.set(DefinitionPropMap.get(target.constructor.name), propertyKey, options);
+        myfx.set(DefinitionPropMap.get(target.constructor), propertyKey, options);
+        //cache tags
+        if (options.hasChanged) {
+            let changeMap = HasChangedPropOrStateMap.get(target.constructor);
+            if (!changeMap) {
+                changeMap = new Map();
+                HasChangedPropOrStateMap.set(target.constructor, changeMap);
+            }
+            changeMap.set(propertyKey, options.hasChanged);
+        }
+        if (options.sync) {
+            let keySet = PropSyncKeySetMap.get(target.constructor);
+            if (!keySet) {
+                keySet = new Set();
+                PropSyncKeySetMap.set(target.constructor, keySet);
+            }
+            keySet.add(propertyKey);
+        }
+        //setters & getters
+        Reflect.defineProperty(target, propertyKey, {
+            get() {
+                return getterValue(descriptor?.get, propertyKey, this);
+            },
+            set(v) {
+                if (descriptor?.set) {
+                    descriptor.set(v);
+                }
+                else {
+                    setterValue(propertyKey, v, this);
+                }
+            },
+        });
     }
     //内部接口
     const emptySet = new Set;
     function _getObservedAttrs(ctor) {
-        return ObservedAttrsMap.get(ctor.name) ?? emptySet;
+        return ObservedAttrsMap.get(ctor) ?? emptySet;
     }
 
     /*************************************************************
@@ -233,6 +550,7 @@
     const AllOutsideDownEls = [];
     const AllOutsideClickEls = [];
     const AllOutsideDblClickEls = [];
+    const ResizeTargetInitSet = new WeakSet();
     const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
             const contentBoxSize = Array.isArray(entry.contentBoxSize)
@@ -241,17 +559,13 @@
             const borderBoxSize = Array.isArray(entry.borderBoxSize)
                 ? entry.borderBoxSize[0]
                 : entry.borderBoxSize;
+            if (!ResizeTargetInitSet.has(entry.target)) {
+                ResizeTargetInitSet.add(entry.target);
+                continue;
+            }
             let cbk = AllResizeEls.get(entry.target);
             if (cbk) {
-                let ev = new CustomEvent('resize', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        borderBox: { w: borderBoxSize.inlineSize, h: borderBoxSize.blockSize },
-                        contentBox: { w: contentBoxSize.inlineSize, h: contentBoxSize.blockSize },
-                    },
-                });
-                cbk(ev, entry.target);
+                cbk({ target: entry.target, contentBoxSize, borderBoxSize, type: 'resize' });
             }
         }
     });
@@ -313,12 +627,8 @@
                     break;
             }
             if (cbk) {
-                let ev = new CustomEvent('mutate', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail
-                });
-                cbk(ev);
+                detail.type = 'mutate';
+                cbk(detail);
             }
         }
     });
@@ -363,15 +673,7 @@
         let t = myfx.get(e.composedPath(), 0, e.target);
         AllOutsideDownEls.forEach(([node, cbk]) => {
             if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
+                cbk({ type: 'outside', target: node, modifier: 'mousedown', event: e });
             }
         });
     }, false);
@@ -379,15 +681,7 @@
         let t = myfx.get(e.composedPath(), 0, e.target);
         AllOutsideClickEls.forEach(([node, cbk]) => {
             if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
+                cbk({ type: 'outside', target: node, modifier: 'click', event: e });
             }
         });
     }, false);
@@ -395,15 +689,7 @@
         let t = myfx.get(e.composedPath(), 0, e.target);
         AllOutsideDblClickEls.forEach(([node, cbk]) => {
             if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
+                cbk({ type: 'outside', target: node, modifier: 'dblclick', event: e });
             }
         });
     }, false);
@@ -424,311 +710,130 @@
     function addOutsideDblClick(node, cbk, component) {
         AllOutsideDblClickEls.push([node, cbk]);
         //record
-        return (remove = false) => {
-            myfx__default["default"].remove(AllOutsideDblClickEls, el => el[0] === node && el[1] === cbk);
-        };
-    }
-    function isExtEvent(evName) {
-        return ExtEvNames.includes(evName);
-    }
-    function addExtEvent(evName, node, cbk, parts, component) {
-        if (evName === 'resize') {
-            return addResize(node, cbk);
-        }
-        else if (evName === 'outside') {
-            switch (parts[0]) {
-                case 'mousedown':
-                    return addOutsideMouseDown(node, cbk);
-                case 'dblclick':
-                    return addOutsideDblClick(node, cbk);
-                case 'click':
-                default:
-                    return addOutsideClick(node, cbk);
-            }
-        }
-        else if (evName === 'mutate') {
-            return addMutation(node, cbk, parts);
-        }
-    }
-
-    const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
-    const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
-    const MODI_EV_SELF = 'self';
-    const MODI_EV_STOP = 'stop';
-    const MODI_EV_PREVENT = 'prevent';
-    const MODI_EV_ONCE = 'once';
-    const MODI_EV_CAPTURE = 'capture';
-    const MODI_EV_PASSIVE = 'passive';
-    const MODI_EV_MOUSE_LEFT = 'left';
-    const MODI_EV_MOUSE_RIGHT = 'right';
-    const MODI_EV_MOUSE_MIDDLE = 'middle';
-    const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
-    const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
-    const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
-    const MODI_EV_KEYBOARD_COMBO_META = 'meta';
-    const MODI_EV_KEYBOARD_KEY_MAP = {
-        'esc': 'escape'
-    };
-    const MODI_PARAM_DIVIDER = ":";
-    /*************************************************************
-     * 事件修饰符
-     * @author holyhigh2
-     *
-     * 全部通用 debounce/once/throttle/capture/passive 可组合
-     * 原生通用 stop/prevent/self 可组合
-     * 鼠标 left/right/middle 不可组合
-     * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
-     *
-     * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
-     *************************************************************/
-    const VFN = () => { };
-    function addEvent(fullName, cbk, node, component) {
-        let parts = fullName.split('.');
-        let evName = parts.shift();
-        let isOnce = parts.includes(MODI_EV_ONCE);
-        let c = cbk ?? VFN;
-        let modi;
-        if (modi = myfx.find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
-            let params = modi.split(MODI_PARAM_DIVIDER);
-            c = myfx.debounce(c, parseInt(params[1]) || 100);
-        }
-        if (modi = myfx.find(parts, x => MODI_EV_THROTTLE.test(x))) {
-            let params = modi.split(MODI_PARAM_DIVIDER);
-            c = myfx.throttle(c, parseInt(params[1]) || 100);
-        }
-        if (isOnce) {
-            c = myfx.once(c);
-        }
-        if (isExtEvent(evName)) {
-            return addExtEvent(evName, node, c, parts);
-        }
-        let listener = (e) => {
-            if (parts.includes(MODI_EV_PREVENT))
-                e.preventDefault();
-            if (parts.includes(MODI_EV_STOP))
-                e.stopPropagation();
-            if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
-                return;
-            if (e instanceof MouseEvent) {
-                if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
-                    return;
-                if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
-                    return;
-                if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
-                    return;
-            }
-            else if (e instanceof KeyboardEvent) {
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
-                    return;
-                let checkKeys = myfx.map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
-                if (myfx.size(checkKeys) > 0 && !checkKeys.includes(e.key.toLowerCase()))
-                    return;
-            }
-            console.debug(evName, c.name, node.tagName);
-            c(e);
-        };
-        let capture = parts.includes(MODI_EV_CAPTURE) || false;
-        let passive = parts.includes(MODI_EV_PASSIVE) || false;
-        let options = { capture, passive };
-        node.addEventListener(evName, listener, options);
-        //record
-        return (remove = false) => {
-            node.removeEventListener(evName, listener, options);
-            if (remove)
-                node = null;
-        };
-    }
-
-    /**
-     * 用于提供全局state状态管理
-     * @author holyhigh2
-     */
-    const Collector = {
-        popDirectiveQ() {
-            let rs = this.__varPathList.reduceRight((acc, p) => {
-                if (!acc.includes(p)) {
-                    acc.unshift(p);
-                }
-                return acc;
-            }, []);
-            return rs;
-        },
-        start() {
-            this.__collecting = true;
-            this.__varPathList = [];
-        },
-        end(renderComponent, up) {
-            if (renderComponent && up) {
-                renderComponent._regSubViewDeps(Collector.popVarPathList(), up);
-            }
-            this.__collecting = false;
-        },
-        popVarPathList() {
-            let rs = Array.from(new Set(this.__varPathList));
-            this.__varPathList = [];
-            return rs;
-        },
-        __varPathList: [],
-        __collecting: false,
-    };
-    //对象值在不同上下文的根路径
-    const OBJECT_VAR_ROOT_PATH_IN_CONTEXT = new WeakMap();
-    const OBJECT_VAR_PATH = new WeakMap();
-    //缓存已经创建的proxy对象
-    const PROXY_MAP = new WeakMap();
-    //对象值的创建上下文
-    const OBJECT_VAR_ROOT_CONTEXT = new WeakMap();
-    //上级对象所在的扩展context
-    const EXTRA_CONTEXT_OF_VAR = new WeakMap();
-    function reactive(obj, context, rootProp) {
-        if (PROXY_MAP.has(obj))
-            return PROXY_MAP.get(obj);
-        if (OBJECT_VAR_ROOT_CONTEXT.has(obj)) {
-            if (rootProp) {
-                let pathMap = OBJECT_VAR_ROOT_PATH_IN_CONTEXT.get(context);
-                if (!pathMap) {
-                    pathMap = new WeakMap();
-                    OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-                }
-                pathMap.set(obj, rootProp);
-                let contextList = EXTRA_CONTEXT_OF_VAR.get(obj);
-                if (!contextList) {
-                    contextList = new Set();
-                    EXTRA_CONTEXT_OF_VAR.set(obj, contextList);
-                }
-                contextList.add(context);
-            }
-            return obj;
-        }
-        const proxyObject = new Proxy(obj, {
-            get(target, prop, receiver) {
-                if (!prop)
-                    return undefined;
-                const value = Reflect.get(target, prop, receiver);
-                if (myfx.isSymbol(prop))
-                    return value;
-                if (myfx.isFunction(value))
-                    return value;
-                if (prop === 'length' && myfx.isArray(target))
-                    return value;
-                if (Collector.__collecting) {
-                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                    supPath.push(prop);
-                    let propPath = supPath.join('.');
-                    Collector.__varPathList.push(propPath);
-                }
-                if (PROXY_MAP.has(value))
-                    return PROXY_MAP.get(value);
-                let reactiveVal = value;
-                if (myfx.isObject(value) && !myfx.isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
-                    reactiveVal = reactive(value, context);
-                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                    supPath.push(prop);
-                    OBJECT_VAR_PATH.set(reactiveVal, supPath);
-                    PROXY_MAP.set(value, reactiveVal);
-                }
-                return reactiveVal;
-            },
-            set(target, prop, newValue, receiver) {
-                if (!prop)
-                    return false;
-                let ov = target[prop];
-                let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-                let subChain = myfx.concat(chain, [prop]);
-                let hasChanged = context._hasChangedPropOrStateMap?.get(subChain[0]);
-                let moreThan1 = subChain.length > 1;
-                let rootObjNew = newValue;
-                let rootObjOld = ov;
-                if (moreThan1) {
-                    rootObjOld = rootObjNew = context._getPrivateData()[subChain[0]];
-                }
-                if (hasChanged) {
-                    if (!hasChanged.call(context, rootObjNew, rootObjOld, subChain, newValue, ov))
-                        return true;
-                }
-                else {
-                    //默认对比算法
-                    if (Object.is(ov, newValue)) {
-                        return true;
-                    }
-                }
-                let nv = newValue;
-                let rs = Reflect.set(target, prop, nv);
-                let extraContext = EXTRA_CONTEXT_OF_VAR.get(receiver);
-                let k = subChain.join('.');
-                //check watch
-                context._requestWatchUpdate(nv, ov, k, rootObjNew, rootObjOld);
-                //check computed
-                context._requestComputedUpdate(k);
-                notifyUpdate(context, rootObjOld, subChain);
-                myfx.each(extraContext, ctx => {
-                    let ctxRootPath = ctx._wrapperProp[subChain[0]];
-                    let ck = subChain.join('.');
-                    ck = ck.replace(subChain[0], ctxRootPath);
-                    //check watch
-                    ctx._requestWatchUpdate(nv, ov, ck);
-                    //check computed
-                    ctx._requestComputedUpdate(ck);
-                    notifyUpdate(ctx, rootObjOld, ck.split('.'));
-                });
-                return rs;
-            }
-        });
-        if (!OBJECT_VAR_PATH.has(proxyObject)) {
-            OBJECT_VAR_PATH.set(proxyObject, rootProp ? [rootProp] : []);
-        }
-        PROXY_MAP.set(obj, proxyObject);
-        if (rootProp) {
-            OBJECT_VAR_ROOT_CONTEXT.set(proxyObject, context);
-            if (!OBJECT_VAR_ROOT_PATH_IN_CONTEXT.has(context)) {
-                let pathMap = new WeakMap();
-                pathMap.set(proxyObject, rootProp);
-                OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-            }
-        }
-        return proxyObject;
-    }
-    function notifyUpdate(context, oldValue, path, subNewValue, subOldValue) {
-        let i = myfx.size(path);
-        myfx.eachRight(path, (p) => {
-            let varPath = myfx.slice(path, 0, i--);
-            context._notify(oldValue, varPath);
-        });
-    }
-    const QMap = new Map();
-    class Queue {
-        static nextSet = new Set();
-        static nextPending = false;
-        static next;
-        static flush() {
-            Queue.nextPending = false;
-            let nq = Array.from(Queue.nextSet);
-            Queue.nextSet.clear();
-            QMap.clear();
-            nq.forEach(u => u());
-            nq = null;
+        return (remove = false) => {
+            myfx__default["default"].remove(AllOutsideDblClickEls, el => el[0] === node && el[1] === cbk);
+        };
+    }
+    function isExtEvent(evName) {
+        return ExtEvNames.includes(evName);
+    }
+    function addExtEvent(evName, node, cbk, parts, component) {
+        if (evName === 'resize') {
+            return addResize(node, cbk);
         }
-        static pushNext(updater) {
-            Queue.nextSet.add(updater);
-            if (!Queue.nextPending) {
-                Queue.nextPending = true;
-                Queue.next();
+        else if (evName === 'outside') {
+            switch (parts[0]) {
+                case 'mousedown':
+                    return addOutsideMouseDown(node, cbk);
+                case 'dblclick':
+                    return addOutsideDblClick(node, cbk);
+                case 'click':
+                default:
+                    return addOutsideClick(node, cbk);
             }
         }
+        else if (evName === 'mutate') {
+            return addMutation(node, cbk, parts);
+        }
     }
-    (() => {
-        const p = Promise.resolve();
-        const nextFn = Queue.flush;
-        Queue.next = () => {
-            p.then(nextFn);
+
+    const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
+    const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
+    const MODI_EV_NATIVE = 'native';
+    const MODI_EV_SELF = 'self';
+    const MODI_EV_STOP = 'stop';
+    const MODI_EV_PREVENT = 'prevent';
+    const MODI_EV_ONCE = 'once';
+    const MODI_EV_CAPTURE = 'capture';
+    const MODI_EV_PASSIVE = 'passive';
+    const MODI_EV_MOUSE_LEFT = 'left';
+    const MODI_EV_MOUSE_RIGHT = 'right';
+    const MODI_EV_MOUSE_MIDDLE = 'middle';
+    const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
+    const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
+    const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
+    const MODI_EV_KEYBOARD_COMBO_META = 'meta';
+    const MODI_EV_KEYBOARD_KEY_MAP = {
+        'esc': 'escape'
+    };
+    const MODI_PARAM_DIVIDER = ":";
+    /*************************************************************
+     * 事件修饰符
+     * @author holyhigh2
+     *
+     * 全部通用 debounce/once/throttle/capture/passive 可组合
+     * 原生通用 stop/prevent/self 可组合
+     * 鼠标 left/right/middle 不可组合
+     * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
+     * 组件 native 监听组件元素原生事件
+     *
+     * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
+     *************************************************************/
+    const VFN = () => { };
+    function addEvent(fullName, cbk, node, component) {
+        let parts = fullName.split('.');
+        let evName = parts.shift();
+        let isOnce = parts.includes(MODI_EV_ONCE);
+        let c = cbk ?? VFN;
+        let modi;
+        if (modi = myfx.find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
+            let params = modi.split(MODI_PARAM_DIVIDER);
+            c = myfx.debounce(c, parseInt(params[1]) || 100);
+        }
+        if (modi = myfx.find(parts, x => MODI_EV_THROTTLE.test(x))) {
+            let params = modi.split(MODI_PARAM_DIVIDER);
+            c = myfx.throttle(c, parseInt(params[1]) || 100);
+        }
+        if (isOnce) {
+            c = myfx.once(c);
+        }
+        if (node instanceof CompElem && !parts.includes(MODI_EV_NATIVE)) {
+            return node._addEvent(evName, cbk);
+        }
+        if (isExtEvent(evName)) {
+            return addExtEvent(evName, node, c, parts);
+        }
+        let listener = (e) => {
+            if (parts.includes(MODI_EV_PREVENT))
+                e.preventDefault();
+            if (parts.includes(MODI_EV_STOP))
+                e.stopPropagation();
+            if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
+                return;
+            if (e instanceof MouseEvent) {
+                if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
+                    return;
+                if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
+                    return;
+                if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
+                    return;
+            }
+            else if (e instanceof KeyboardEvent) {
+                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
+                    return;
+                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
+                    return;
+                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
+                    return;
+                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
+                    return;
+                let checkKeys = myfx.map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
+                if (myfx.size(checkKeys) > 0 && !checkKeys.includes(e.key.toLowerCase()))
+                    return;
+            }
+            c(e);
         };
-    })();
+        let capture = parts.includes(MODI_EV_CAPTURE) || false;
+        let passive = parts.includes(MODI_EV_PASSIVE) || false;
+        let options = { capture, passive };
+        node.addEventListener(evName, listener, options);
+        //record
+        return (remove = false) => {
+            node.removeEventListener(evName, listener, options);
+            if (remove)
+                node = null;
+        };
+    }
 
     const PropTypeMap = {
         boolean: Boolean,
@@ -775,29 +880,21 @@
         }
         #cid;
         #slotPropsMap = {};
-        #data = {};
+        __data_ = {};
         #updateSources = {};
         #shadow;
         //保存所有渲染上下文 {CompElem/Directive}
         __updateTree;
-        __cssSheets;
-        _eventList;
+        _eventBindList;
+        _listerners = {};
         __docoEventMap;
-        __updateCssDeps;
         __updateSubViewDeps;
-        __updateViewDeps;
-        _watchUpdateMap;
-        _watchDeepUpdateMap;
-        _watchKeys;
-        _watchKeysOnceMap;
-        _watchKeysDeep;
+        _cssUpdateInNextTick = false;
+        _cssVarOldValueMap;
+        __cssSheets;
         _watchUpdateSetInNextTick;
         _watchUpdateArgsInNextTick;
-        _computedUpdateDeps;
         _computedUpdateSetInNextTick;
-        _hasChangedPropOrStateMap;
-        _hasSyncPropSet;
-        _hasShallowStateSet;
         get [Symbol.toStringTag]() {
             return this.constructor.name;
         }
@@ -820,29 +917,29 @@
             return this.#parentComponent?.deref();
         }
         get wrapperComponent() {
-            return this.#wrapperComponent?.deref();
+            return this.__wrapperComponent?.deref();
+        }
+        get slots() {
+            return EMPTY_SLOTS;
         }
         get slotHooks() {
             return this.#slotHooks;
         }
-        get styleSheets() {
-            return ComponentStaticStyleMap.get(this);
+        get cssSheets() {
+            return ComponentStaticStyleMap.get(this.constructor);
         }
-        get globalStyleSheet() {
+        get globalCssSheet() {
             return CompElem.__l_globalRule.sheet;
         }
         get isMounted() {
             return this.#mounted;
         }
-        get slots() {
-            return EMPTY_SLOTS;
-        }
         #attrs;
         #props;
         #renderRoot;
         #renderRoots;
         #parentComponent;
-        #wrapperComponent;
+        __wrapperComponent;
         #slotsEl = {};
         #slotHooks = {};
         #slotNodes = {};
@@ -853,33 +950,46 @@
         /**
          * 组件样式，CSSStyleSheet可动态变更
          */
-        static get styles() {
+        static get css() {
             return [];
         }
-        static get globalStyle() {
+        static get globalCss() {
             return undefined;
         }
-        static get hostStyle() {
+        static get hostCss() {
             return undefined;
         }
-        get styles() {
-            return [];
+        get cssVars() {
+            return {};
         }
-        #inited = false;
+        __inited = false;
         #initiating = false;
+        #onSlotChangeHookBindThis;
+        __thisRef;
         constructor(...args) {
             super();
             this.#cid = CompElemSn++;
             this.__updateTree = [];
+            this.__thisRef = new WeakRef(this);
+            this.#onSlotChangeHookBindThis = this.#onSlotChangeHook.bind(this);
             //init props via constructor
             if (myfx.size(args) === 1) {
                 this.#props = {};
                 myfx.assign(this.#props, myfx.first(args));
             }
             /////////////////////////////////////////////////// slots
-            // this.#updateSlotsAry()
+            if (!Reflect.getOwnPropertyDescriptor(this.constructor.prototype, 'slots')) {
+                Reflect.defineProperty(this.constructor.prototype, 'slots', {
+                    get() {
+                        return getterValue(undefined, 'slots', this);
+                    },
+                    set(v) {
+                        setterValue('slots', v, this);
+                    }
+                });
+            }
             /////////////////////////////////////////////////// decorators create
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+            let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
             ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => dw.create(this));
             this.#updatedD = this.#update.bind(this);
         }
@@ -902,7 +1012,7 @@
             }
             this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, cssSheet];
             // Keep ComponentStyleMap in sync for this constructor
-            const cur = ComponentStaticStyleMap.get(this) ?? [];
+            const cur = ComponentStaticStyleMap.get(this.constructor) ?? [];
             cur.push(cssSheet);
             return cssSheet;
         }
@@ -929,8 +1039,8 @@
                 document.head.appendChild(CompElem.__l_globalRule);
             }
             //host styles
-            let hostStyle = myfx.get(this.constructor, "hostStyle");
-            let styleSheet = myfx.get(this.constructor, 'hostStyleSheet');
+            let hostStyle = myfx.get(this.constructor, "hostCss");
+            let styleSheet = myfx.get(this.constructor, 'hostCssSheet');
             if (hostStyle) {
                 if (!styleSheet) {
                     if (myfx.isString(hostStyle)) {
@@ -940,11 +1050,11 @@
                     else {
                         styleSheet = hostStyle;
                     }
-                    myfx.set(this.constructor, 'hostStyleSheet', styleSheet);
+                    myfx.set(this.constructor, 'hostCssSheet', styleSheet);
                 }
-                let styleRoot = this.#wrapperComponent?.deref()?.shadowRoot ?? this.#parentComponent?.deref()?.shadowRoot ?? this.ownerDocument;
+                let styleRoot = this.__wrapperComponent?.deref()?.shadowRoot ?? this.#parentComponent?.deref()?.shadowRoot ?? this.ownerDocument;
                 //detached el
-                if (this.#wrapperComponent && !this.#wrapperComponent.deref()?.shadowRoot?.contains(this)) {
+                if (this.__wrapperComponent && !this.__wrapperComponent.deref()?.shadowRoot?.contains(this)) {
                     styleRoot = myfx.closest(this, n => n instanceof HTMLDocument || n instanceof ShadowRoot, 'parentNode');
                 }
                 if (styleRoot && styleSheet && !styleRoot.adoptedStyleSheets.includes(styleSheet)) {
@@ -958,7 +1068,7 @@
             this.__unbindEvents();
         }
         __bindEvents() {
-            let evs = this._eventList;
+            let evs = this._eventBindList;
             myfx.each(evs, (v) => {
                 let [evName, cbk, node, binded] = v;
                 if (binded)
@@ -970,7 +1080,7 @@
                 v[3] = unbinder;
             });
             //event decoration
-            let events = DefinitionCompEventMap.get(this.constructor.name);
+            let events = DefinitionCompEventMap.get(this.constructor);
             if (myfx.size(events) > 0) {
                 if (!this.__docoEventMap)
                     this.__docoEventMap = new Map();
@@ -986,7 +1096,7 @@
             }
         }
         __unbindEvents() {
-            myfx.each(this._eventList, (v) => {
+            myfx.each(this._eventBindList, (v) => {
                 let [, , , unbinder] = v;
                 if (unbinder)
                     unbinder();
@@ -1012,45 +1122,26 @@
             if (this.#destroyed)
                 return;
             this.#destroyed = true;
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+            let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
             ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
                 dw.destroy(this);
             });
             this.beforeDestroyed();
             //events
             this.__unbindEvents();
-            myfx.each(this.#rootEvs, (hooks, evName) => {
-                myfx.each(hooks, hook => {
-                    this.removeEventListener(evName, hook);
-                });
-                this.#rootEvs[evName] = null;
-            });
-            myfx.each(this.#nodeEvs, (hooks, evName) => {
-                myfx.each(hooks, ([hook, ref]) => {
-                    ref.deref()?.removeEventListener(evName, hook);
-                });
-                this.#nodeEvs[evName] = null;
-            });
+            this._listerners = null;
             this.__docoEventMap?.clear();
-            this.__docoEventMap = this._eventList = null;
+            this.__docoEventMap = this._eventBindList = null;
             //styles
-            ComponentStaticStyleMap.delete(this);
             ComponentDynamicCssUpdaterMap.get(this)?.clear();
             ComponentDynamicCssUpdaterMap.delete(this);
             //reactive
             this._watchUpdateArgsInNextTick?.clear();
             this._watchUpdateSetInNextTick?.clear();
-            this._watchKeysOnceMap?.clear();
-            this._watchUpdateMap = this._watchDeepUpdateMap = this._watchKeys = this._watchKeysDeep = this._watchKeysOnceMap = null;
-            this._computedUpdateDeps?.clear();
             this._computedUpdateSetInNextTick?.clear();
-            this._computedUpdateDeps = this._computedUpdateSetInNextTick = null;
-            this.__updateCssDeps = this.__updateViewDeps = null;
+            this._computedUpdateSetInNextTick = null;
+            this.__cssSheets = null;
             this.__updateSubViewDeps?.clear();
-            this._hasChangedPropOrStateMap?.clear();
-            this._hasShallowStateSet?.clear();
-            this._hasSyncPropSet?.clear();
-            this._hasChangedPropOrStateMap = this._hasShallowStateSet = this._hasSyncPropSet = null;
             //sup scope
             if (this.#parentComponent) {
                 let pComp = this.#parentComponent.deref();
@@ -1073,32 +1164,28 @@
             myfx.each(this.#slotNodes, (nodes) => {
                 myfx.each(nodes, (node) => node.remove());
             });
-            myfx.each(this.#data.slots, (nodes, k) => {
+            myfx.each(this.__data_.slots, (nodes, k) => {
                 myfx.each(nodes, (node) => node.remove());
             });
             this.#updateSlots.clear();
-            this.#updateSlots = this.#slotPropsMap = this.#data.slots = null;
+            this.#slotNodes = this.#slotsEl = this.#updateSlots = this.#slotPropsMap = this.__data_.slots = null;
             this.remove();
             //data
             this._wrapperProp =
-                this.#slotNodes =
-                    this.#propsReady =
-                        this.#renderRoot = this.#renderRoots = this.#shadow =
-                            this.#rootEvs =
-                                this.#nodeEvs =
-                                    this.#updateSources =
-                                        this.#attrs =
-                                            this.#props =
-                                                this.#renderRoot =
-                                                    this.#renderRoots =
-                                                        this.#slotHooks =
-                                                            this.#updatedD =
-                                                                this.#data =
-                                                                    this.#slotsEl =
-                                                                        this.__updateTree =
-                                                                            this.#parentComponent =
-                                                                                this._asyncDirectives =
-                                                                                    this.#wrapperComponent = null;
+                this.#propsReady =
+                    this.#renderRoot = this.#renderRoots = this.#shadow =
+                        this.#updateSources =
+                            this.#attrs =
+                                this.#props =
+                                    this.#renderRoot =
+                                        this.#renderRoots =
+                                            this.#slotHooks =
+                                                this.#updatedD =
+                                                    this.__data_ =
+                                                        this.__updateTree =
+                                                            this.#parentComponent =
+                                                                this._asyncDirectives =
+                                                                    this.__wrapperComponent = null;
             //unmount
             this.destroyed();
         }
@@ -1106,24 +1193,23 @@
         //********************************** 首次渲染
         //构造时上级传递的参数
         __init() {
-            if (this.#inited)
+            if (this.__inited)
                 return;
             //防止在钩子中出现重新挂载的情况
             if (this.#initiating)
                 return;
             this.#initiating = true;
-            let thisRef = new WeakRef(this);
             //global styles
-            let globalTextContent = myfx.get(this.constructor, "globalStyle");
+            let globalTextContent = myfx.get(this.constructor, "globalCss");
             if (!myfx.isEmpty(globalTextContent) && myfx.isString(globalTextContent) && !myfx.get(this.constructor, '_globalRuleInserted')) {
                 CompElem.__l_globalRule.textContent += globalTextContent; //.sheet?.insertRule(globalTextContent, 0)
                 myfx.set(this.constructor, '_globalRuleInserted', true);
             }
             //component styles
-            let beAttached2 = ComponentStaticStyleMap.get(this);
+            let beAttached2 = ComponentStaticStyleMap.get(this.constructor);
             let styleSheets = beAttached2 ?? [];
             if (!beAttached2) {
-                myfx.each(myfx.get(this.constructor, "styles"), (st) => {
+                myfx.each(myfx.get(this.constructor, "css"), (st) => {
                     if (myfx.isString(st)) {
                         let sheet = new CSSStyleSheet();
                         sheet.replaceSync(st);
@@ -1134,156 +1220,78 @@
                         styleSheets.push(st);
                     }
                 });
-                ComponentStaticStyleMap.set(this, styleSheets);
+                ComponentStaticStyleMap.set(this.constructor, styleSheets);
             }
             ////////////////////////////////////////////////// Props & States
             const props = this.#initProps();
             this.propsReady(props);
             for (const key in props) {
                 const v = props[key];
-                this.#data[key] = v;
+                this.__data_[key] = v;
             }
             this.#initStates();
             //2. Data
-            this.#data.slots = {};
-            myfx.each(this.#data, (v, k) => {
-                let descr = Reflect.getOwnPropertyDescriptor(this.#data, k);
-                Reflect.defineProperty(this, k, {
-                    get() {
-                        let thisHost = thisRef.deref();
-                        let v = descr?.get ? descr?.get() : Reflect.get(thisHost.#data, k);
-                        if (Collector.__collecting) {
-                            Collector.__varPathList.push(k);
-                        }
-                        if (PROXY_MAP.has(v)) {
-                            let contextList = EXTRA_CONTEXT_OF_VAR.get(v);
-                            if (!contextList) {
-                                contextList = new Set();
-                                EXTRA_CONTEXT_OF_VAR.set(v, contextList);
-                            }
-                            contextList.add(thisHost);
-                            return PROXY_MAP.get(v);
-                        }
-                        if (myfx.isObject(v) && !myfx.isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
-                            let shallow = thisHost._hasShallowStateSet?.has(k);
-                            v = shallow || k === PROP_NAME_SLOTS ? v : reactive(v, this, k);
-                        }
-                        return v;
-                    },
-                    set(v) {
-                        if (descr?.set) {
-                            descr?.set(v);
-                        }
-                        else {
-                            let thisHost = thisRef.deref();
-                            if (!thisHost.#inited) {
-                                Reflect.set(thisHost.#data, k, v);
-                                return;
-                            }
-                            let oldValue = thisHost.#data[k];
-                            let hasChanged = thisHost._hasChangedPropOrStateMap?.get(k);
-                            if (hasChanged) {
-                                if (!hasChanged.call(thisHost, v, oldValue, [k], v, oldValue))
-                                    return true;
-                            }
-                            else {
-                                //默认对比算法
-                                if (Object.is(oldValue, v)) {
-                                    return true;
-                                }
-                            }
-                            //check watch
-                            thisHost._requestWatchUpdate(v, oldValue, k);
-                            //check computed
-                            thisHost._requestComputedUpdate(k);
-                            Reflect.set(thisHost.#data, k, v);
-                            thisHost._notify(oldValue, [k]);
-                            //update sync
-                            if (thisHost._hasSyncPropSet?.has(k)) {
-                                thisHost.emit('update' + ":" + k, { value: v });
-                            }
-                        }
-                    },
-                });
-            });
-            Reflect.defineProperty(this.#data, '__isData', {
+            this.__data_.slots = {};
+            Reflect.defineProperty(this.__data_, '__isData', {
                 enumerable: false,
                 value: true
             });
             //3. Watch
-            let watchMap = DefinitionWatchMap.get(this.constructor.name) ?? DefinitionWatchMap.get(_getSuper(this.constructor).name);
-            if (watchMap) {
-                this._watchUpdateMap = {};
-                this._watchDeepUpdateMap = {};
-                this._watchKeys = [];
-                this._watchKeysDeep = [];
+            let superComp = _getSuper(this.constructor);
+            let watchKeys = WatchKeysListMap.get(this.constructor) ?? WatchKeysListMap.get(superComp);
+            if (watchKeys) {
                 this._watchUpdateSetInNextTick = new Set();
                 this._watchUpdateArgsInNextTick = new Map();
-                this._watchKeysOnceMap = new Map();
-                myfx.each(watchMap, (watchList, k) => {
-                    watchList.forEach(v => {
-                        let { source, options, handler } = v;
-                        let fn = handler;
-                        let onceWatch = myfx.get(options, "once", false);
-                        if (onceWatch) {
-                            this._watchKeysOnceMap.set(k, false);
-                        }
-                        let deep = myfx.get(options, "deep", false);
-                        this._watchKeys.push(k);
-                        if (deep) {
-                            this._watchDeepUpdateMap[k] = this._watchDeepUpdateMap[k] ?? new Set();
-                            this._watchDeepUpdateMap[k].add(fn);
-                            this._watchKeysDeep.push(k);
-                        }
-                        else {
-                            this._watchUpdateMap[k] = this._watchUpdateMap[k] ?? new Set();
-                            this._watchUpdateMap[k].add(fn);
-                        }
-                        let immediate = myfx.get(options, "immediate", false);
-                        if (!immediate)
-                            return;
-                        let nv = myfx.get(this, source);
-                        fn.call(this, nv, undefined, source);
-                        if (onceWatch) {
-                            this._watchKeysOnceMap.set(k, true);
-                        }
+                let onceMap = WatchKeysOnceMap.get(this.constructor) ?? WatchKeysOnceMap.get(superComp);
+                let watchImmediateList = WatchImmediateListMap.get(this.constructor) ?? WatchImmediateListMap.get(superComp);
+                myfx.each(watchImmediateList, (fns, k) => {
+                    let nv = myfx.get(this, k);
+                    fns.forEach(fn => {
+                        fn.call(this, nv, undefined, k);
                     });
+                    if (onceMap.has(k)) {
+                        onceMap.set(k, true);
+                    }
                 });
             }
             //4. Computed
-            let computedMap = DefinitionComputedMap.get(this.constructor.name) ?? DefinitionComputedMap.get(_getSuper(this.constructor).name);
+            let computedMap = myfx.assign({}, DefinitionComputedMap.get(this.constructor), DefinitionComputedMap.get(superComp));
             if (computedMap) {
-                this._computedUpdateDeps = new Map();
                 this._computedUpdateSetInNextTick = new Set();
-                myfx.each(computedMap, (getter, propKey) => {
-                    myfx.set(getter, 'key', propKey);
-                    Collector.start();
-                    this.#data[propKey] = getter.call(this);
-                    Collector.end();
-                    let computedDeps = Collector.popVarPathList();
-                    computedDeps.forEach(dep => {
-                        let list = this._computedUpdateDeps.get(dep);
-                        if (!list) {
-                            list = new Set();
-                            this._computedUpdateDeps.set(dep, list);
-                        }
-                        list.add(getter);
-                    });
-                    Reflect.defineProperty(this, propKey, {
-                        get() {
-                            let v = Reflect.get(thisRef.deref().#data, propKey);
-                            if (Collector.__collecting) {
-                                Collector.__varPathList.push(propKey);
+                let depMap = ComputedUpdateDepsMap.get(this.constructor);
+                if (!depMap) {
+                    depMap = new Map();
+                    ComputedUpdateDepsMap.set(this.constructor, depMap);
+                    myfx.each(computedMap, (getter, propKey) => {
+                        myfx.set(getter, 'key', propKey);
+                        Collector.start();
+                        this[DATA_KEY][propKey] = getter.call(this);
+                        Collector.end();
+                        let computedDeps = Collector.popVarPathList();
+                        computedDeps.forEach(dep => {
+                            let list = depMap.get(dep);
+                            if (!list) {
+                                list = new Set();
+                                depMap.set(dep, list);
                             }
-                            return v;
-                        }
+                            list.add(getter);
+                        });
                     });
-                });
+                }
+                else {
+                    myfx.each(computedMap, (getter, propKey) => {
+                        this[DATA_KEY][propKey] = getter.call(this);
+                    });
+                }
             }
             //5. Render
             Collector.start();
             let tmpl = this.render();
             Collector.end();
+            let viewDeps = Collector.popVarPathList();
+            if (!this.constructor.prototype._viewDeps) {
+                this.constructor.prototype._viewDeps = viewDeps;
+            }
             let nodes;
             if (tmpl === null) {
                 this.#renderRoots = [];
@@ -1294,16 +1302,14 @@
                 this.#shadow = this.attachShadow({
                     mode: "open"
                 });
-                let viewDeps = Collector.popVarPathList();
-                this.__updateViewDeps = viewDeps;
-                this.#shadow.adoptedStyleSheets = [...DefaultCss, ...(ComponentStaticStyleMap.get(this) ?? [])];
+                this.#shadow.adoptedStyleSheets = [...DefaultCss, ...(ComponentStaticStyleMap.get(this.constructor) ?? [])];
                 nodes = buildView(tmpl, this);
                 if (nodes) {
                     this.#renderRoots = myfx.filter(nodes, (n) => n.nodeType === Node.ELEMENT_NODE).map(n => new WeakRef(n));
-                    this.#renderRoot = new WeakRef(nodes[0]);
+                    this.#renderRoot = this.#renderRoots[0];
                 }
             }
-            this.#inited = true;
+            this.__inited = true;
             /////////////////////////////////////////////////// slots
             this.#updateSlotsAry();
             //slot hook
@@ -1311,11 +1317,11 @@
                 this.#updateSlot(k);
             });
             const that = this;
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+            let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
             ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
                 dw.beforeMount(this, (key, value) => {
-                    that.#data[key] = value;
-                    return that.#data[key];
+                    that.__data_[key] = value;
+                    return that.__data_[key];
                 });
             });
             this.beforeMount();
@@ -1327,30 +1333,34 @@
                 this.#mounted = true;
                 if (this.#shadow) {
                     //instance dynamic style
-                    let cssAry = [];
                     Collector.start();
-                    let cssTmpls = this.styles;
+                    let cssVarObj = this.cssVars;
                     Collector.end();
-                    this.__updateCssDeps = Collector.popVarPathList();
-                    cssTmpls.forEach(cssTmpl => {
-                        let cssss = new CSSStyleSheet();
-                        cssAry.push(cssss);
-                        let css = cssTmpl.getCss(this);
-                        if (myfx.isBlank(css))
-                            return;
-                        cssss.replaceSync(css);
-                    });
-                    if (cssAry.length > 0) {
-                        this.__cssSheets = cssAry;
-                        this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, ...cssAry];
+                    if (!myfx.isEmpty(cssVarObj)) {
+                        this._cssVarOldValueMap = {};
+                        let deps = CssUpdateDepsMap.get(this.constructor);
+                        if (!deps) {
+                            deps = new Set(Collector.popVarPathList());
+                            CssUpdateDepsMap.set(this.constructor, deps);
+                        }
+                        let cssStr = '';
+                        myfx.each(cssVarObj, (v, k) => {
+                            let cssVarKey = '--' + myfx.kebabCase(k).replace(/^-+/, '');
+                            if (myfx.isBlank(v) || myfx.isNil(v)) {
+                                v = 'initial'; // invalid value
+                            }
+                            this._cssVarOldValueMap[cssVarKey] = v;
+                            cssStr += ';' + cssVarKey + ':' + v;
+                        });
+                        this.style.cssText += cssStr;
                     }
                 }
                 if (nodes)
                     this.#shadow.append(...nodes);
                 ary && ary.forEach(dw => {
                     dw.mounted(this, (key, value) => {
-                        that.#data[key] = value;
-                        return that.#data[key];
+                        that.__data_[key] = value;
+                        return that.__data_[key];
                     });
                 });
                 if (this.#updateNextImmediatelyQ) {
@@ -1369,7 +1379,7 @@
         }
         beforeMount() { }
         mounted() { }
-        __onSlotChangeHook(e) {
+        #onSlotChangeHook(e) {
             let t = e.currentTarget;
             let name = '';
             myfx.each(this.#slotsEl, (el, n) => {
@@ -1378,7 +1388,7 @@
                     return false;
                 }
             });
-            if (this.#inited)
+            if (this.__inited)
                 this.#onSlotChange(t, name === SLOT_NAME_DEFAULT ? '' : name);
         }
         #onSlotChange(slot, name) {
@@ -1421,18 +1431,18 @@
         }
         slotChange(slot, name) { }
         attributeChangedCallback(attributeName, oldValue, newValue) {
-            if (!this.#inited)
+            if (!this.__inited)
                 return;
             if (Object.is(newValue, oldValue))
                 return;
             let propName = myfx.camelCase(attributeName);
-            let propDef = DefinitionPropMap.get(this.constructor.name)[propName];
+            let propDef = DefinitionPropMap.get(this.constructor)[propName];
             if (isBooleanProp(propDef.type)) {
                 let v = myfx.isNull(newValue) ? false : getBooleanValue(newValue);
                 if (myfx.get(this, propName) === v)
                     return;
             }
-            this.__attrChanged(attributeName, oldValue, newValue);
+            this.#attrChanged(attributeName, oldValue, newValue);
         }
         //********************************** 更新
         /**
@@ -1450,8 +1460,6 @@
          * @param changed
          */
         updated(changed) { }
-        #rootEvs = {};
-        #nodeEvs = {};
         /**
          * 由监控变量调用
          * @param stateKey
@@ -1475,33 +1483,6 @@
             }
             Queue.pushNext(this.#updatedD);
         }
-        _requestWatchUpdate(newValue, oldValue, fullPath, rootObjNew, rootObjOld) {
-            this._watchKeys?.forEach(wk => {
-                if (fullPath === wk ||
-                    (myfx.startsWith(wk, fullPath + '.') && !Object.is(myfx.get(this._getPrivateData(), wk), myfx.get(newValue, wk))) ||
-                    (myfx.startsWith(fullPath, wk + '.') && this._watchKeysDeep.includes(wk) && !Object.is(myfx.get(this._getPrivateData(), wk), myfx.get(newValue, wk)))) {
-                    myfx.concat(myfx.toArray(this._watchUpdateMap[wk]), myfx.toArray(this._watchDeepUpdateMap[wk])).forEach(fn => {
-                        if (!fn)
-                            return;
-                        if (this._watchKeysOnceMap.get(wk) === true)
-                            return;
-                        this._watchUpdateArgsInNextTick.set(fn, {
-                            newValue, oldValue, chain: fullPath.split('.'), rootObjNew, rootObjOld, fullMatch: wk === fullPath
-                        });
-                        this._watchUpdateSetInNextTick.add(fn);
-                        if (this._watchKeysOnceMap.has(wk))
-                            this._watchKeysOnceMap.set(wk, true);
-                    });
-                }
-            });
-        }
-        _requestComputedUpdate(fullPath) {
-            if (this._computedUpdateDeps?.has(fullPath)) {
-                this._computedUpdateDeps.get(fullPath)?.forEach(fn => {
-                    this._computedUpdateSetInNextTick.add(fn);
-                });
-            }
-        }
         #update() {
             if (myfx.size(this.#updateSources) < 1)
                 return;
@@ -1513,19 +1494,16 @@
             if (toBreak)
                 return;
             //update decorators
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+            let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
             ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
                 dw.updated(this, changed);
             });
             //1. filter update point
-            let toUpdateCss = false;
             let toUpdateView = false;
             let toUpdateUps = new Set();
+            let viewDeps = this.constructor.prototype._viewDeps;
             myfx.each(changed, (x, k) => {
-                if (this.__updateCssDeps?.includes(k)) {
-                    toUpdateCss = true;
-                }
-                if (!toUpdateView && this.__updateViewDeps?.includes(k)) {
+                if (!toUpdateView && viewDeps?.includes(k)) {
                     toUpdateView = true;
                 }
                 if (this.__updateSubViewDeps?.has(k)) {
@@ -1546,18 +1524,32 @@
             // update computed
             this._computedUpdateSetInNextTick?.forEach(fn => {
                 let k = myfx.get(fn, 'key');
-                let oldValue = this.#data[k];
+                let oldValue = this.__data_[k];
                 let newValue = fn.call(this);
                 if (!myfx.isObject(newValue) && newValue === oldValue)
                     return;
-                this.#data[k] = newValue;
+                this.__data_[k] = newValue;
                 this._notify(oldValue, [k]);
             });
             this._computedUpdateSetInNextTick?.clear();
+            // update css
+            if (this._cssUpdateInNextTick) {
+                let cssVarObj = this.cssVars;
+                myfx.each(cssVarObj, (v, k) => {
+                    let cssVarKey = '--' + myfx.kebabCase(k).replace(/^-+/, '');
+                    if (this._cssVarOldValueMap[cssVarKey] == v) {
+                        return;
+                    }
+                    if (myfx.isBlank(v) || myfx.isNil(v)) {
+                        v = 'initial'; // invalid value
+                    }
+                    this._cssVarOldValueMap[cssVarKey] = v;
+                    this.style.setProperty(cssVarKey, v + '');
+                });
+            }
             //2. update view
             if (this.#renderRoot?.deref()) {
                 if (toUpdateView) {
-                    console.debug('update view....', this.constructor.name);
                     updateView(this.render(), this, this.__updateTree);
                 }
                 if (myfx.size(toUpdateUps) > 0) {
@@ -1570,10 +1562,6 @@
             this.#updateSlots.forEach((v) => {
                 this.#updateSlot(v);
             });
-            //update dcss
-            if (toUpdateCss) {
-                this.#updateCss();
-            }
             this.updated(changed);
         }
         /**
@@ -1583,7 +1571,7 @@
          * @returns 非props的attr集合
          */
         #initProps() {
-            let propDefs = DefinitionPropMap.get(this.constructor.name) ?? DefinitionPropMap.get(_getSuper(this.constructor).name);
+            let propDefs = DefinitionPropMap.get(this.constructor) ?? DefinitionPropMap.get(_getSuper(this.constructor));
             let attrs = this.attributes;
             let tagName = this.tagName;
             let parentProps = this.#props;
@@ -1602,7 +1590,7 @@
             this.#attrs = this.#attrs ? myfx.assign(this.#attrs, filterAttrs) : filterAttrs;
             let rs = {};
             if (!propDefs)
-                return Object.seal(rs);
+                return rs;
             let keys = Object.keys(propDefs);
             let size = keys.length;
             for (let i = 0; i < size; i++) {
@@ -1626,18 +1614,6 @@
                         propDef.type = inferredType;
                     }
                 }
-                if (propDef.hasChanged) {
-                    if (!this._hasChangedPropOrStateMap) {
-                        this._hasChangedPropOrStateMap = new Map();
-                    }
-                    this._hasChangedPropOrStateMap.set(key, propDef.hasChanged);
-                }
-                if (propDef.sync) {
-                    if (!this._hasSyncPropSet) {
-                        this._hasSyncPropSet = new Set();
-                    }
-                    this._hasSyncPropSet.add(key);
-                }
                 let val = undefined;
                 if (isInited) {
                     val = myfx.isNil(parentProps[key]) ? defaultVal : parentProps[key];
@@ -1658,25 +1634,14 @@
                     break;
                 }
                 val = this.#propTypeCheck(propDefs, key, val, hasAttr);
-                let getter = myfx.get(propDefs, [key, 'getter']);
-                if (getter)
-                    getter = myfx.bind(getter, this);
-                let setter = myfx.get(propDefs, [key, 'setter']);
-                if (setter)
-                    setter = myfx.bind(setter, this);
-                if (getter || setter) {
-                    Reflect.defineProperty(this.#data, key, {
-                        set: setter || function (v) { },
-                        get: getter
-                    });
-                }
                 if (propDef.attribute && myfx.isDefined(val) && !myfx.isObject(val)) {
                     this.#updateAttribute(propDef, key, val);
                 }
-                this.#data[key] = val;
+                this.__data_[key] = val;
                 rs[key] = val;
+                delete this[key];
             }
-            return Object.seal(rs);
+            return rs;
         }
         #updateAttribute(propDef, key, val) {
             let k = myfx.kebabCase(key);
@@ -1774,35 +1739,24 @@
                 showTagError(this.tagName, `Invalid prop '${propKey}'. expected '${expectTypeAry.map((t) => t.name || t)}' but got '${realType}'`);
             }
             if (validator) {
-                if (!validator.call(this, val, this.#data)) {
+                if (!validator.call(this, val, this.__data_)) {
                     showTagError(this.tagName, `Invalid prop '${propKey}'. IsValid() check failed`);
                 }
             }
             return val;
         }
         #initStates() {
-            let stateDefs = DefinitionStateMap.get(this.constructor.name) ?? DefinitionStateMap.get(_getSuper(this.constructor).name);
+            let stateDefs = DefinitionStateMap.get(this.constructor) ?? DefinitionStateMap.get(_getSuper(this.constructor));
             if (stateDefs)
                 myfx.each(stateDefs, (def, key) => {
                     let stateDef = stateDefs[key];
                     let val = myfx.get(this, key);
                     if (stateDef) {
                         let propName = stateDef.prop;
-                        val = propName ? myfx.cloneDeep(this.#data[propName]) : myfx.get(this, key);
-                    }
-                    if (stateDef.hasChanged) {
-                        if (!this._hasChangedPropOrStateMap) {
-                            this._hasChangedPropOrStateMap = new Map();
-                        }
-                        this._hasChangedPropOrStateMap.set(key, stateDef.hasChanged);
-                    }
-                    if (stateDef.shallow) {
-                        if (!this._hasShallowStateSet) {
-                            this._hasShallowStateSet = new Set();
-                        }
-                        this._hasShallowStateSet.add(key);
+                        val = propName ? myfx.cloneDeep(this.__data_[propName]) : myfx.get(this, key);
                     }
-                    this.#data[key] = val;
+                    this.__data_[key] = val;
+                    delete this[key];
                 });
         }
         /**
@@ -1811,9 +1765,8 @@
          * @param attrs
          */
         #propsReady = myfx.debounce(this.propsReady, 100);
-        //todo 这里需要直接修改prop
         _updateProps(props) {
-            let propDefs = DefinitionPropMap.get(this.constructor.name);
+            let propDefs = DefinitionPropMap.get(this.constructor);
             if (!propDefs)
                 return;
             let need2UpdateAttrs = [];
@@ -1846,10 +1799,10 @@
                     if (fromPath) {
                         let propPath = fromPath.join(PATH_SEPARATOR);
                         this._wrapperProp[propPath] = k;
-                        let parentStateDefs = this.wrapperComponent ? DefinitionStateMap.get(this.wrapperComponent?.constructor.name) : null;
+                        let parentStateDefs = this.wrapperComponent ? DefinitionStateMap.get(this.wrapperComponent?.constructor) : null;
                         let parentStateKey = fromPath[0];
                         if (parentStateDefs && parentStateDefs[parentStateKey]) {
-                            let propDefs = DefinitionPropMap.get(this.constructor.name);
+                            let propDefs = DefinitionPropMap.get(this.constructor);
                             myfx.set(propDefs, [k, 'shallow'], parentStateDefs[parentStateKey].shallow);
                         }
                     }
@@ -1865,7 +1818,9 @@
                 this.#slotsEl[name] = slot;
                 SlotCompMap.set(slot, this);
             }
-            this.addEvent(slot, 'slotchange', this.__onSlotChangeHook);
+            let evName = 'slotchange';
+            let unbinder = addEvent(evName, this.#onSlotChangeHookBindThis, slot);
+            this._eventBindList.push([evName, this.#onSlotChangeHookBindThis, slot, unbinder]);
             //3. 保存参数
             if (!myfx.isEmpty(props)) {
                 let slotMap = this.#slotPropsMap[name];
@@ -1965,9 +1920,9 @@
             if (!hook)
                 return;
             let slotMap = this.#slotPropsMap[name];
-            if (!this.#data.slots)
+            if (!this.__data_.slots)
                 return;
-            let slot = this.#data.slots[name];
+            let slot = this.__data_.slots[name];
             //slot not ready yet
             //1. 可能是if/each等指令还未插入
             if (!slot)
@@ -1994,22 +1949,14 @@
         _asyncDirectives = new WeakMap();
         renderAsync(cbk, ...args) {
         }
-        #updateCss() {
-            let cssTmpls = this.styles;
-            cssTmpls.forEach((cssTmpl, i) => {
-                let cssss = this.__cssSheets[i];
-                let css = cssTmpl.getCss(this);
-                cssss.replaceSync(css);
-            });
-        }
-        __attrChanged(name, oldValue, newValue) {
-            if (!this.#inited)
+        #attrChanged(name, oldValue, newValue) {
+            if (!this.__inited)
                 return;
             let observedAttrs = _getObservedAttrs(this.constructor);
             if (observedAttrs.has(name)) {
                 let camelName = myfx.camelCase(name);
                 if (myfx.isNull(newValue)) {
-                    let propDefs = DefinitionPropMap.get(this.constructor.name);
+                    let propDefs = DefinitionPropMap.get(this.constructor);
                     //使用默认值
                     if (propDefs)
                         newValue = propDefs[camelName]._defaultValue;
@@ -2017,9 +1964,6 @@
                 this._updateProps({ [camelName]: newValue });
             }
         }
-        _regWrapper(wrapperComponent) {
-            this.#wrapperComponent = new WeakRef(wrapperComponent);
-        }
         _regSubViewDeps(props, up) {
             if (!this.__updateSubViewDeps) {
                 this.__updateSubViewDeps = new Map();
@@ -2034,78 +1978,38 @@
             });
         }
         _getPrivateData() {
-            return this.#data;
+            return this.__data_;
         }
         ////////////////////----------------------------/////////////// APIs
         /**
-         * 抛出自定义事件
+         * 发出组件事件
          * @param evName 事件名称
          * @param args 自定义参数
          */
-        emit(evName, arg = {}, options) {
-            if (options && options.event) {
-                arg.event = options.event;
+        emit(evName, arg = {}, event) {
+            if (event) {
+                arg.event = event;
             }
             arg.target = this;
-            this.dispatchEvent(new CustomEvent(evName, {
-                bubbles: myfx.get(options, "bubbles", false),
-                composed: myfx.get(options, "composed", false),
-                cancelable: true,
-                detail: arg,
-            }));
-        }
-        /**
-         * 在root上绑定事件
-         * @param evName
-         * @param hook
-         * @returns 函数钩子，用于卸载
-         */
-        on(evName, hook) {
-            if (!this.#rootEvs[evName]) {
-                this.#rootEvs[evName] = [];
-            }
-            let cbk = hook.bind(this);
-            this.#rootEvs[evName].push(cbk);
-            this.addEventListener(evName, cbk);
-            return cbk;
-        }
-        /**
-         * 从root上移除事件
-         * @param evName
-         * @param hook on函数返回的钩子，可选。为空时移除所有evName事件
-         */
-        off(evName, hook) {
-            if (hook) {
-                this.removeEventListener(evName, hook);
-                myfx.remove(this.#rootEvs[evName], cbk => cbk === hook);
+            if (myfx.has(this.#attrs, 'emit-native')) {
+                this.dispatchEvent(new CustomEvent(evName, {
+                    bubbles: false,
+                    composed: false,
+                    cancelable: true,
+                    detail: arg,
+                }));
             }
             else {
-                myfx.each(this.#rootEvs[evName], cbk => {
-                    this.removeEventListener(evName, cbk);
-                });
-                this.#rootEvs[evName] = [];
-            }
-        }
-        addEvent(node, evName, hook) {
-            if (!this.#nodeEvs[evName]) {
-                this.#nodeEvs[evName] = [];
+                if (this._listerners[evName]) {
+                    this._listerners[evName](arg);
+                }
             }
-            let cbk = hook.bind(this);
-            this.#nodeEvs[evName].push([cbk, new WeakRef(node)]);
-            node.addEventListener(evName, cbk);
-            return cbk;
         }
-        removeEvent(node, evName, hook) {
-            if (hook) {
-                node.removeEventListener(evName, hook);
-                myfx.remove(this.#nodeEvs[evName], ([cbk]) => cbk === hook);
-            }
-            else {
-                myfx.each(this.#nodeEvs[evName], ([cbk]) => {
-                    node.removeEventListener(evName, cbk);
-                });
-                this.#nodeEvs[evName] = [];
+        _addEvent(evName, hook) {
+            if (!this._listerners) {
+                this._listerners = {};
             }
+            this._listerners[evName] = hook;
         }
         /**
          * 下一帧执行
@@ -2126,7 +2030,7 @@
          * 强制更新一次视图
          */
         forceUpdate() {
-            myfx.each(this.#data, (v, k) => {
+            myfx.each(this.__data_, (v, k) => {
                 this.#updateSources[k] = {
                     value: undefined,
                     chain: undefined,
@@ -2694,7 +2598,7 @@
     const EXP_ATTR_CHECK = /[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims;
     const EXP_PLACEHOLDER = /<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/imgs;
     const SLOT_KEY_PROPS = 'slot-props';
-    const HTML_TMPL_CACHE = {};
+    const HTML_TMPL_CACHE = new Map();
     /**
      * 提供渲染函数相关操作
      * @author holyhigh2
@@ -2772,12 +2676,12 @@
      * 构建模板为DOM结构
      * @param html
      */
-    function buildTmplate(updatePoints, html, vars, renderComponent, isDirective = false) {
+    function buildTmplate(updatePoints, html, vars, renderComponent) {
         const container = document.createElement("div");
         container.innerHTML = html;
-        let evList = renderComponent._eventList;
+        let evList = renderComponent._eventBindList;
         if (!evList) {
-            evList = renderComponent._eventList = [];
+            evList = renderComponent._eventBindList = [];
         }
         //遍历dom
         const nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
@@ -2985,7 +2889,7 @@
                     } //endif
                 } //endfor
                 if (currentNode instanceof CompElem) {
-                    currentNode._regWrapper(renderComponent);
+                    setWrapper(currentNode, renderComponent);
                     if (myfx.size(props) > 0)
                         currentNode._initProps(props);
                 }
@@ -3059,14 +2963,14 @@
     function buildView(tmpl, component) {
         let updatePoints = [];
         let nodes;
-        if (HTML_TMPL_CACHE[component.tagName]) {
-            let htmlTmpl = HTML_TMPL_CACHE[component.tagName];
+        if (HTML_TMPL_CACHE.has(component.constructor)) {
+            let htmlTmpl = HTML_TMPL_CACHE.get(component.constructor);
             let vars = buildVars(component, tmpl);
             nodes = buildTmplate(updatePoints, htmlTmpl, vars, component);
         }
         else {
             let [html, vars] = buildHTML(component, tmpl);
-            HTML_TMPL_CACHE[component.tagName] = html;
+            HTML_TMPL_CACHE.set(component.constructor, html);
             nodes = buildTmplate(updatePoints, html, vars, component);
         }
         component.__updateTree = updatePoints;
@@ -3075,7 +2979,7 @@
     function buildSubView(pointNode, tmpl, component, po, bindEvent = false) {
         let [html, vars] = buildHTML(component, tmpl);
         let updatePoints = [];
-        let nodes = buildTmplate(updatePoints, html, vars, component, true);
+        let nodes = buildTmplate(updatePoints, html, vars, component);
         if (bindEvent)
             component.__bindEvents();
         updatePoints.forEach(up => {
@@ -3200,14 +3104,6 @@
     function html(strings, ...vars) {
         return new Template(myfx.isString(strings) ? [strings] : strings, vars);
     }
-    /**
-     * 标签函数，用于构建样式
-     * @param strings
-     * @param vars
-     */
-    function css(strings, ...vars) {
-        return new CssTemplate(myfx.isString(strings) ? [strings] : strings, vars);
-    }
     const EXP_STR = /([a-z0-9"'])\s*>\s*</img;
     class RefObject {
         #ref;
@@ -3226,6 +3122,9 @@
     function createRef() {
         return new RefObject();
     }
+    function setWrapper(target, wrapperComponent) {
+        target.__wrapperComponent = new WeakRef(wrapperComponent);
+    }
 
     //装饰器类型
     exports.DecoratorType = void 0;
@@ -3324,12 +3223,12 @@
         let fn = (...args) => {
             return (...metadata) => {
                 let ctor = metadata[0].constructor;
-                let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-                if (!DefinitionDecoratorMap.has(ctor.name)) {
+                let ary = DefinitionDecoratorMap.get(ctor); //  ctor[_DecoratorsKey]
+                if (!DefinitionDecoratorMap.has(ctor)) {
                     //继承父类
                     let proto = Object.getPrototypeOf(ctor);
-                    ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-                    DefinitionDecoratorMap.set(ctor.name, ary);
+                    ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto) ?? []) : [];
+                    DefinitionDecoratorMap.set(ctor, ary);
                 }
                 let dw = new DecoratorWrapper(args, metadata.splice(1), decoClass);
                 ary?.push(dw);
@@ -3343,12 +3242,12 @@
             if (!metadata || metadata.length < 1)
                 return;
             let ctor = metadata[0].constructor;
-            let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-            if (!DefinitionDecoratorMap.has(ctor.name)) {
+            let ary = DefinitionDecoratorMap.get(ctor); //  ctor[_DecoratorsKey]
+            if (!DefinitionDecoratorMap.has(ctor)) {
                 //继承父类
                 let proto = Object.getPrototypeOf(ctor);
-                ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-                DefinitionDecoratorMap.set(ctor.name, ary);
+                ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto) ?? []) : [];
+                DefinitionDecoratorMap.set(ctor, ary);
             }
             let dw = new DecoratorWrapper([], metadata.splice(1), decoClass);
             ary?.push(dw);
@@ -3361,10 +3260,22 @@
         if (!descriptor.get) {
             showError(`Computed '${propertyKey}' must be a getter`);
         }
-        if (!DefinitionComputedMap.has(target.constructor.name)) {
-            DefinitionComputedMap.set(target.constructor.name, {});
+        if (!DefinitionComputedMap.has(target.constructor)) {
+            DefinitionComputedMap.set(target.constructor, {});
         }
-        DefinitionComputedMap.get(target.constructor.name)[propertyKey] = descriptor.get;
+        DefinitionComputedMap.get(target.constructor)[propertyKey] = descriptor.get;
+        //getter
+        delete target[propertyKey];
+        Reflect.defineProperty(target, propertyKey, {
+            get() {
+                if (Collector.__collecting) {
+                    Collector.__varPathList.push(propertyKey);
+                }
+                let v = Reflect.get(this[DATA_KEY], propertyKey);
+                return v;
+            }
+        });
+        return Reflect.getOwnPropertyDescriptor(target, propertyKey);
     }
 
     /**
@@ -3409,15 +3320,15 @@
      */
     function event(eventName, eventTarget) {
         return (target, name, descriptor) => {
-            if (!DefinitionCompEventMap.has(target.constructor.name)) {
+            if (!DefinitionCompEventMap.has(target.constructor)) {
                 let mixinEvents = [];
                 let parentCtor = target.constructor;
                 while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                    mixinEvents = myfx.concat(mixinEvents, DefinitionCompEventMap.get(parentCtor.name) ?? []);
+                    mixinEvents = myfx.concat(mixinEvents, DefinitionCompEventMap.get(parentCtor) ?? []);
                 }
-                DefinitionCompEventMap.set(target.constructor.name, mixinEvents);
+                DefinitionCompEventMap.set(target.constructor, mixinEvents);
             }
-            DefinitionCompEventMap.get(target.constructor.name)?.push({ name: eventName, targetFn: eventTarget, fnName: name });
+            DefinitionCompEventMap.get(target.constructor)?.push({ name: eventName, targetFn: eventTarget, fnName: name });
         };
     }
 
@@ -3535,16 +3446,42 @@
         defineState(target, stateKey, { prop: "" });
     }
     function defineState(target, stateKey, options) {
-        if (!DefinitionStateMap.has(target.constructor.name)) {
+        if (!DefinitionStateMap.has(target.constructor)) {
             const mixinStates = {};
             let parentCtor = target.constructor;
             while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                myfx.merge(mixinStates, DefinitionStateMap.get(parentCtor.name) ?? {});
+                myfx.merge(mixinStates, DefinitionStateMap.get(parentCtor) ?? {});
             }
-            DefinitionStateMap.set(target.constructor.name, mixinStates);
+            DefinitionStateMap.set(target.constructor, mixinStates);
         }
         options.shallow = options.shallow || false;
-        myfx.set(DefinitionStateMap.get(target.constructor.name), stateKey, options);
+        myfx.set(DefinitionStateMap.get(target.constructor), stateKey, options);
+        //cache tags
+        if (options.hasChanged) {
+            let changeMap = HasChangedPropOrStateMap.get(target.constructor);
+            if (!changeMap) {
+                changeMap = new Map();
+                HasChangedPropOrStateMap.set(target.constructor, changeMap);
+            }
+            changeMap.set(stateKey, options.hasChanged);
+        }
+        if (options.shallow) {
+            let keySet = StateShallowKeySetMap.get(target.constructor);
+            if (!keySet) {
+                keySet = new Set();
+                StateShallowKeySetMap.set(target.constructor, keySet);
+            }
+            keySet.add(stateKey);
+        }
+        //setters & getters
+        Reflect.defineProperty(target.constructor.prototype, stateKey, {
+            get() {
+                return getterValue(undefined, stateKey, this);
+            },
+            set(v) {
+                setterValue(stateKey, v, this);
+            },
+        });
     }
     /**
      * 同@state装饰器，但可用于构造器中调用
@@ -3609,27 +3546,67 @@
      */
     function watch(source, options) {
         return (target, name) => {
-            if (!DefinitionWatchMap.has(target.constructor.name)) {
-                const watchMap = {};
-                let parentCtor = target.constructor;
-                while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                    if (DefinitionWatchMap.has(parentCtor.name)) {
-                        let parentMap = DefinitionWatchMap.get(parentCtor.name);
-                        myfx.each(parentMap, (list, k) => {
-                            watchMap[k] = list;
+            let watchDeepUpdateMap = WatchDeepUpdateMap.get(target.constructor);
+            let watchUpdateMap = WatchUpdateMap.get(target.constructor);
+            let onceMap = WatchKeysOnceMap.get(target.constructor);
+            let watchKeysDeep = WatchKeysDeepListMap.get(target.constructor);
+            let watchKeys = WatchKeysListMap.get(target.constructor);
+            let watchImmediateList = WatchImmediateListMap.get(target.constructor);
+            if (!watchKeys) {
+                watchKeys = [];
+                WatchKeysListMap.set(target.constructor, watchKeys);
+                watchKeysDeep = [];
+                WatchKeysDeepListMap.set(target.constructor, watchKeysDeep);
+                onceMap = new Map();
+                WatchKeysOnceMap.set(target.constructor, onceMap);
+                watchDeepUpdateMap = {};
+                WatchDeepUpdateMap.set(target.constructor, watchDeepUpdateMap);
+                watchUpdateMap = {};
+                WatchUpdateMap.set(target.constructor, watchUpdateMap);
+                watchImmediateList = {};
+                WatchImmediateListMap.set(target.constructor, watchImmediateList);
+                let parentCtor = _getSuper(target.constructor);
+                while (parentCtor) {
+                    if (WatchKeysListMap.has(parentCtor)) {
+                        watchKeys.push(...WatchKeysListMap.get(parentCtor));
+                        watchKeysDeep.push(...WatchKeysDeepListMap.get(parentCtor));
+                        WatchKeysOnceMap.get(parentCtor)?.forEach((v, k) => {
+                            onceMap.set(k, v);
                         });
+                        myfx.assign(watchDeepUpdateMap, WatchDeepUpdateMap.get(parentCtor));
+                        myfx.assign(watchUpdateMap, WatchUpdateMap.get(parentCtor));
+                        myfx.assign(watchImmediateList, WatchImmediateListMap.get(parentCtor));
                     }
+                    parentCtor = _getSuper(parentCtor);
                 }
-                DefinitionWatchMap.set(target.constructor.name, watchMap);
             }
             const sources = myfx.isArray(source) ? source : [source];
             sources.forEach(src => {
-                let srcList = DefinitionWatchMap.get(target.constructor.name)[src];
-                if (!myfx.isArray(srcList)) {
-                    srcList = [];
-                    DefinitionWatchMap.get(target.constructor.name)[src] = srcList;
+                let handler = target[name];
+                //////////////////////////////
+                let onceWatch = myfx.get(options, "once", false);
+                if (onceWatch) {
+                    onceMap.set(src, false);
+                }
+                let deep = myfx.get(options, "deep", false);
+                watchKeys.push(src);
+                if (deep) {
+                    watchDeepUpdateMap[src] = watchDeepUpdateMap[src] ?? new Set();
+                    watchDeepUpdateMap[src].add(handler);
+                    watchKeysDeep.push(src);
+                }
+                else {
+                    watchUpdateMap[src] = watchUpdateMap[src] ?? new Set();
+                    watchUpdateMap[src].add(handler);
+                }
+                let immediate = myfx.get(options, "immediate", false);
+                if (immediate) {
+                    let handlerSet = watchImmediateList[src];
+                    if (!handlerSet) {
+                        handlerSet = watchImmediateList[src] = new Set();
+                    }
+                    handlerSet.add(handler);
                 }
-                srcList.push({ source: src, options, handler: target[name] });
             });
         };
     }
@@ -3652,7 +3629,7 @@
                 //判断是否prop
                 let props = {};
                 let attrs = {};
-                let propDefs = DefinitionPropMap.get(el.constructor.name);
+                let propDefs = DefinitionPropMap.get(el.constructor);
                 myfx.each(obj, (v, k) => {
                     if (Ignores.includes(k))
                         return;
@@ -3952,13 +3929,13 @@
             if (!(rootPath in renderComponent) && !renderComponent._wrapperProp[rootPath]) {
                 showError(`model - property '${rootPath}' is not defined on the instance of ` + renderComponent.tagName);
             }
-            let evList = renderComponent._eventList;
+            let evList = renderComponent._eventBindList;
             if (!myfx.isObject(modelValue) && !myfx.trim(modelValue))
                 modelValue = '';
             if (node instanceof CompElem) {
                 node._initProps({ [updateProp]: modelValue });
                 let evName = 'update:' + updateProp;
-                evList.push([evName, function (e) {
+                evList.push([evName, function (obj) {
                         console.debug('Model =>', path);
                         let ctx = this;
                         let pathFromWrapperComponent = ctx._wrapperProp[rootPath];
@@ -3966,7 +3943,7 @@
                         if (!hasPath && pathFromWrapperComponent && myfx.get(ctx.wrapperComponent, rootPath) === myfx.get(ctx, pathFromWrapperComponent)) {
                             ctx = ctx.wrapperComponent || ctx;
                         }
-                        myfx.set(ctx, path, e.detail.value);
+                        myfx.set(ctx, path, obj.value);
                     }, node]);
             }
             else if (node instanceof HTMLTextAreaElement) {
@@ -4188,7 +4165,6 @@
 
     exports.CompElem = CompElem;
     exports.CssHelper = CssHelper;
-    exports.CssTemplate = CssTemplate;
     exports.DI_COMMENT_START_NODE_MAP = DI_COMMENT_START_NODE_MAP;
     exports.Decorator = Decorator;
     exports.DecoratorWrapper = DecoratorWrapper;
@@ -4204,7 +4180,6 @@
     exports.classes = classes;
     exports.computed = computed;
     exports.createRef = createRef;
-    exports.css = css;
     exports.debounced = debounced;
     exports.decorator = decorator;
     exports.decoratorWithNoArgs = decoratorWithNoArgs;