diff --git a/changelog.md b/changelog.md
index 97ab875a6..e92247d0c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-09)
+- 支持自动watch
 - 支持h函数传递left、right，优化left_right_vertical_adapt布局的jsx写法
 - 新增bi.virtual_group_list组件
 
diff --git a/examples/dev.html b/examples/dev.html
index 481d2620d..3da8b21c9 100644
--- a/examples/dev.html
+++ b/examples/dev.html
@@ -12,187 +12,31 @@
     var Model = BI.inherit(Fix.Model, {
         state: function () {
             return {
-                expand: false,
-                showClearAll: false,
-                hasUndo: false,
-                hasRedo: false
+                count: 0
             };
-        },
-
-        computed: {
-            expandText: function () {
-                return this.model.expand ? "expand" : "not-expand";
-            },
-            clearAllText: function () {
-                return this.model.showClearAll ? "showClearAll" : "not-showClearAll";
-            },
-            undoText: function () {
-                return this.model.hasUndo ? "hasUndo" : "not-hasUndo";
-            },
-            redoText: function () {
-                return this.model.hasRedo ? "hasRedo" : "not-hasRedo";
-            }
-        },
-
-        actions: {
-            setExpand: function () {
-                this.model.expand = !this.model.expand;
-            },
-            setClearAll: function () {
-                this.model.showClearAll = !this.model.showClearAll;
-            },
-            setUndo: function () {
-                this.model.hasUndo = !this.model.hasUndo;
-            },
-            setRedo: function () {
-                this.model.hasRedo = !this.model.hasRedo;
-            }
         }
     });
 
     BI.model("demo.model", Model);
 
-    function useExpand () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("expandText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.expandText,
-                handler: function () {
-                    store.setExpand();
-                }
-            };
-        };
-    }
-
-    function useClearAll () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("clearAllText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.clearAllText,
-                handler: function () {
-                    store.setClearAll();
-                }
-            };
-        };
-    }
-
-    function useUndo () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("undoText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.undoText,
-                handler: function () {
-                    store.setUndo();
-                }
-            };
-        };
-    }
-
-    function useRedo () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("redoText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.redoText,
-                handler: function () {
-                    store.setRedo();
-                }
-            };
-        };
-    }
-
     var Widget = BI.inherit(BI.Widget, {
         _store: function () {
             return BI.Models.getModel("demo.model");
         },
         setup: function () {
-            var expandComponent = useExpand();
-            var clearAllComponent = useClearAll();
-            var undoComponent = useUndo();
-            var redoComponent = useRedo();
+            var store = BI.useStore();
             return function () {
                 return {
                     type: "bi.vertical",
-                    items: [expandComponent(), clearAllComponent(), undoComponent(), redoComponent()]
+                    items: [{
+                        type: "bi.button",
+                        effect: function () {
+                            this.setText(store.model.count)
+                        },
+                        handler: function () {
+                            store.model.count++;
+                        }
+                    }]
                 };
             };
         }
diff --git a/examples/effect.html b/examples/effect.html
new file mode 100644
index 000000000..65ebd4530
--- /dev/null
+++ b/examples/effect.html
@@ -0,0 +1,57 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
+    <script src="../dist/2.0/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                count: 0
+            };
+        }
+    });
+
+    BI.model("demo.model", Model);
+
+    var Widget = BI.inherit(BI.Widget, {
+        _store: function () {
+            return BI.Models.getModel("demo.model");
+        },
+        setup: function () {
+            var store = BI.useStore();
+            return function () {
+                return {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.button",
+                        effect: function () {
+                            this.setText(store.model.count)
+                        },
+                        handler: function () {
+                            store.model.count++;
+                        }
+                    }]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>
diff --git a/examples/style.html b/examples/style.html
new file mode 100644
index 000000000..81063b19c
--- /dev/null
+++ b/examples/style.html
@@ -0,0 +1,66 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
+    <script src="../dist/2.0/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                cls: "my-cls",
+                background: "red",
+                count: 0
+            };
+        }
+    });
+
+    BI.model("demo.model", Model);
+
+    var Widget = BI.inherit(BI.Widget, {
+        _store: function () {
+            return BI.Models.getModel("demo.model");
+        },
+        setup: function () {
+            var store = BI.useStore();
+            return function () {
+                return {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.button",
+                        cls: function () {
+                            return store.model.cls;
+                        },
+                        css: function () {
+                            return {
+                                background: store.model.background
+                            }
+                        },
+                        text: "按钮",
+                        handler: function () {
+                            store.model.cls = "my-cls" + store.model.count++;
+                            store.model.background = "blue";
+                        }
+                    }]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>
diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js
index 2634edfac..1167801bd 100644
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@@ -22,8 +22,7 @@ BI.CollectionView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.CollectionView.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this.renderedCells = [];
         this.renderedKeys = [];
diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js
index 8fdd126e2..9af2ab922 100644
--- a/src/base/combination/combo.js
+++ b/src/base/combination/combo.js
@@ -39,8 +39,7 @@
             });
         },
 
-        _init: function () {
-            BI.Combo.superclass._init.apply(this, arguments);
+        render: function () {
             var self = this, o = this.options;
             this._initCombo();
             this._initPullDownAction();
diff --git a/src/base/combination/expander.js b/src/base/combination/expander.js
index 4e6ab7b58..866949f28 100644
--- a/src/base/combination/expander.js
+++ b/src/base/combination/expander.js
@@ -21,8 +21,7 @@ BI.Expander = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.Expander.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this._expanded = !!o.el.open;
         this._initExpander();
@@ -279,4 +278,4 @@ BI.Expander.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 BI.Expander.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
 BI.Expander.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
 
-BI.shortcut("bi.expander", BI.Expander);
\ No newline at end of file
+BI.shortcut("bi.expander", BI.Expander);
diff --git a/src/base/combination/group.button.js b/src/base/combination/group.button.js
index d9642d696..622ede324 100644
--- a/src/base/combination/group.button.js
+++ b/src/base/combination/group.button.js
@@ -20,8 +20,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.ButtonGroup.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         var behaviors = {};
         BI.each(o.behaviors, function (key, rule) {
@@ -327,4 +326,4 @@ BI.extend(BI.ButtonGroup, {
 });
 BI.ButtonGroup.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.button_group", BI.ButtonGroup);
\ No newline at end of file
+BI.shortcut("bi.button_group", BI.ButtonGroup);
diff --git a/src/base/combination/group.combo.js b/src/base/combination/group.combo.js
index 38bc96fff..60b7f1873 100644
--- a/src/base/combination/group.combo.js
+++ b/src/base/combination/group.combo.js
@@ -30,8 +30,7 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.ComboGroup.superclass._init.apply(this, arguments);
+    render: function () {
         this._populate(this.options.el);
     },
 
@@ -94,4 +93,4 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
 });
 BI.ComboGroup.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.combo_group", BI.ComboGroup);
\ No newline at end of file
+BI.shortcut("bi.combo_group", BI.ComboGroup);
diff --git a/src/base/combination/loader.js b/src/base/combination/loader.js
index 310c606b3..a29ba45ce 100644
--- a/src/base/combination/loader.js
+++ b/src/base/combination/loader.js
@@ -53,8 +53,7 @@ BI.Loader = BI.inherit(BI.Widget, {
         }]);
     },
 
-    _init: function () {
-        BI.Loader.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         if (o.itemsCreator === false) {
             o.prev = false;
diff --git a/src/base/combination/searcher.js b/src/base/combination/searcher.js
index d0ae9d3c8..7da8689c2 100644
--- a/src/base/combination/searcher.js
+++ b/src/base/combination/searcher.js
@@ -42,8 +42,7 @@ BI.Searcher = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.Searcher.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
 
         this.editor = BI.createWidget(o.el, {
@@ -317,4 +316,4 @@ BI.Searcher.EVENT_PAUSE = "EVENT_PAUSE";
 BI.Searcher.EVENT_SEARCHING = "EVENT_SEARCHING";
 BI.Searcher.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
 
-BI.shortcut("bi.searcher", BI.Searcher);
\ No newline at end of file
+BI.shortcut("bi.searcher", BI.Searcher);
diff --git a/src/base/combination/switcher.js b/src/base/combination/switcher.js
index 77dc78752..96a1d3c6a 100644
--- a/src/base/combination/switcher.js
+++ b/src/base/combination/switcher.js
@@ -22,8 +22,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.Switcher.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this._initSwitcher();
         this._initPullDownAction();
@@ -289,4 +288,4 @@ BI.Switcher.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 BI.Switcher.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
 BI.Switcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
 
-BI.shortcut("bi.switcher", BI.Switcher);
\ No newline at end of file
+BI.shortcut("bi.switcher", BI.Switcher);
diff --git a/src/base/combination/tree.button.js b/src/base/combination/tree.button.js
index 0235ebf25..45b436b8a 100644
--- a/src/base/combination/tree.button.js
+++ b/src/base/combination/tree.button.js
@@ -11,10 +11,6 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
     },
 
-    _init: function () {
-        BI.ButtonTree.superclass._init.apply(this, arguments);
-    },
-
     setNotSelectedValue: function (v) {
         v = BI.isArray(v) ? v : [v];
         BI.each(this.buttons, function (i, item) {
@@ -179,4 +175,4 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
 });
 BI.ButtonTree.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.button_tree", BI.ButtonTree);
\ No newline at end of file
+BI.shortcut("bi.button_tree", BI.ButtonTree);
diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js
index b497e4363..4525c78bb 100644
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@@ -25,8 +25,7 @@ BI.GridView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.GridView.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this.renderedCells = [];
         this.renderedKeys = [];
diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js
index e3278742b..66db79ec7 100644
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@@ -42,8 +42,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        BI.PopupView.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         var fn = function (e) {
             e.stopPropagation();
diff --git a/src/base/layer/layer.searcher.js b/src/base/layer/layer.searcher.js
index 88e01fd4f..12867ed93 100644
--- a/src/base/layer/layer.searcher.js
+++ b/src/base/layer/layer.searcher.js
@@ -41,8 +41,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
         });
     },
 
-    _init: function () {
-        BI.SearcherView.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
 
         this.matcher = BI.createWidget(o.matcher, {
@@ -138,4 +137,4 @@ BI.SearcherView = BI.inherit(BI.Pane, {
 });
 BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.searcher_view", BI.SearcherView);
\ No newline at end of file
+BI.shortcut("bi.searcher_view", BI.SearcherView);
diff --git a/src/base/pager/pager.js b/src/base/pager/pager.js
index d055eda90..5967271b2 100644
--- a/src/base/pager/pager.js
+++ b/src/base/pager/pager.js
@@ -40,8 +40,8 @@ BI.Pager = BI.inherit(BI.Widget, {
             hasNext: BI.emptyFn  // pages不可用时有效
         });
     },
-    _init: function () {
-        BI.Pager.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this;
         this.currPage = BI.result(this.options, "curr");
         // 翻页太灵敏
@@ -286,4 +286,4 @@ BI.Pager = BI.inherit(BI.Widget, {
 });
 BI.Pager.EVENT_CHANGE = "EVENT_CHANGE";
 BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
-BI.shortcut("bi.pager", BI.Pager);
\ No newline at end of file
+BI.shortcut("bi.pager", BI.Pager);
diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js
index a71e91760..a4192db03 100644
--- a/src/base/single/a/a.js
+++ b/src/base/single/a/a.js
@@ -17,9 +17,9 @@ BI.A = BI.inherit(BI.Text, {
             tagName: "a"
         });
     },
-    _init: function () {
+
+    render: function () {
         var o = this.options;
-        BI.A.superclass._init.apply(this, arguments);
         this.element.attr({href: o.href, target: o.target});
         if (o.el) {
             BI.createWidget(o.el, {
@@ -29,4 +29,4 @@ BI.A = BI.inherit(BI.Text, {
     }
 });
 
-BI.shortcut("bi.a", BI.A);
\ No newline at end of file
+BI.shortcut("bi.a", BI.A);
diff --git a/src/base/single/bar/bar.loading.js b/src/base/single/bar/bar.loading.js
index bc79f5cbe..27b54cd69 100644
--- a/src/base/single/bar/bar.loading.js
+++ b/src/base/single/bar/bar.loading.js
@@ -12,8 +12,8 @@ BI.LoadingBar = BI.inherit(BI.Single, {
             handler: BI.emptyFn
         });
     },
-    _init: function () {
-        BI.LoadingBar.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this;
         this.loaded = BI.createWidget({
             type: "bi.text_button",
@@ -77,4 +77,4 @@ BI.LoadingBar = BI.inherit(BI.Single, {
     }
 });
 
-BI.shortcut("bi.loading_bar", BI.LoadingBar);
\ No newline at end of file
+BI.shortcut("bi.loading_bar", BI.LoadingBar);
diff --git a/src/base/single/button/buttons/button.icon.js b/src/base/single/button/buttons/button.icon.js
index 614e7d87e..5eb104e6d 100644
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@@ -13,8 +13,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
-        BI.IconButton.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.element.css({
             textAlign: "center"
diff --git a/src/base/single/button/buttons/button.image.js b/src/base/single/button/buttons/button.image.js
index 503ce034a..58be4351e 100644
--- a/src/base/single/button/buttons/button.image.js
+++ b/src/base/single/button/buttons/button.image.js
@@ -16,8 +16,7 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
-        BI.ImageButton.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.image = BI.createWidget({
             type: "bi.img",
@@ -84,4 +83,4 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
     }
 });
 BI.ImageButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.image_button", BI.ImageButton);
\ No newline at end of file
+BI.shortcut("bi.image_button", BI.ImageButton);
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index 8e47d5a99..127764eb1 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -39,8 +39,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
-        BI.Button.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, self = this;
         if (BI.isKey(o.iconCls)) {
             this.icon = BI.createWidget({
diff --git a/src/base/single/button/buttons/button.text.js b/src/base/single/button/buttons/button.text.js
index 98a2e31bb..bbb3e0e50 100644
--- a/src/base/single/button/buttons/button.text.js
+++ b/src/base/single/button/buttons/button.text.js
@@ -22,8 +22,7 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
-        BI.TextButton.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -87,4 +86,4 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
     }
 });
 BI.TextButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_button", BI.TextButton);
\ No newline at end of file
+BI.shortcut("bi.text_button", BI.TextButton);
diff --git a/src/base/single/button/listitem/blankiconicontextitem.js b/src/base/single/button/listitem/blankiconicontextitem.js
index a3b1704ff..9e8301a53 100644
--- a/src/base/single/button/listitem/blankiconicontextitem.js
+++ b/src/base/single/button/listitem/blankiconicontextitem.js
@@ -25,8 +25,8 @@ BI.BlankIconIconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.BlankIconIconTextItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         var blank = BI.createWidget({
             type: "bi.layout",
diff --git a/src/base/single/button/listitem/blankicontexticonitem.js b/src/base/single/button/listitem/blankicontexticonitem.js
index 652000414..99d6ad575 100644
--- a/src/base/single/button/listitem/blankicontexticonitem.js
+++ b/src/base/single/button/listitem/blankicontexticonitem.js
@@ -26,8 +26,8 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.BlankIconTextIconItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
diff --git a/src/base/single/button/listitem/blankicontextitem.js b/src/base/single/button/listitem/blankicontextitem.js
index b21d99e98..d647637dc 100644
--- a/src/base/single/button/listitem/blankicontextitem.js
+++ b/src/base/single/button/listitem/blankicontextitem.js
@@ -24,8 +24,8 @@ BI.BlankIconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.BlankIconTextItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         var blank = BI.createWidget({
             type: "bi.layout",
diff --git a/src/base/single/button/listitem/icontexticonitem.js b/src/base/single/button/listitem/icontexticonitem.js
index 98defa2c2..3cae823de 100644
--- a/src/base/single/button/listitem/icontexticonitem.js
+++ b/src/base/single/button/listitem/icontexticonitem.js
@@ -25,8 +25,8 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.IconTextIconItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
diff --git a/src/base/single/button/listitem/icontextitem.js b/src/base/single/button/listitem/icontextitem.js
index a6c7b596d..648b98381 100644
--- a/src/base/single/button/listitem/icontextitem.js
+++ b/src/base/single/button/listitem/icontextitem.js
@@ -25,8 +25,8 @@ BI.IconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.IconTextItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
diff --git a/src/base/single/button/listitem/texticonitem.js b/src/base/single/button/listitem/texticonitem.js
index 08cb1f394..7eb468087 100644
--- a/src/base/single/button/listitem/texticonitem.js
+++ b/src/base/single/button/listitem/texticonitem.js
@@ -24,8 +24,8 @@ BI.TextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.TextIconItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
diff --git a/src/base/single/button/listitem/textitem.js b/src/base/single/button/listitem/textitem.js
index d842e7a27..ffbcc1efd 100644
--- a/src/base/single/button/listitem/textitem.js
+++ b/src/base/single/button/listitem/textitem.js
@@ -20,8 +20,8 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.TextItem.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -83,4 +83,4 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
     }
 });
 BI.TextItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_item", BI.TextItem);
\ No newline at end of file
+BI.shortcut("bi.text_item", BI.TextItem);
diff --git a/src/base/single/button/node/icontexticonnode.js b/src/base/single/button/node/icontexticonnode.js
index 1b25170e2..01870423f 100644
--- a/src/base/single/button/node/icontexticonnode.js
+++ b/src/base/single/button/node/icontexticonnode.js
@@ -23,8 +23,8 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.IconTextIconNode.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -110,4 +110,4 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
     }
 });
 BI.IconTextIconNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.icon_text_icon_node", BI.IconTextIconNode);
\ No newline at end of file
+BI.shortcut("bi.icon_text_icon_node", BI.IconTextIconNode);
diff --git a/src/base/single/button/node/icontextnode.js b/src/base/single/button/node/icontextnode.js
index 01eaf4c4c..35e5757b8 100644
--- a/src/base/single/button/node/icontextnode.js
+++ b/src/base/single/button/node/icontextnode.js
@@ -22,8 +22,8 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.IconTextNode.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -87,4 +87,4 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
     }
 });
 BI.IconTextNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.icon_text_node", BI.IconTextNode);
\ No newline at end of file
+BI.shortcut("bi.icon_text_node", BI.IconTextNode);
diff --git a/src/base/single/button/node/texticonnode.js b/src/base/single/button/node/texticonnode.js
index ee6bda545..2231c4c88 100644
--- a/src/base/single/button/node/texticonnode.js
+++ b/src/base/single/button/node/texticonnode.js
@@ -21,8 +21,8 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.TextIconNode.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -86,4 +86,4 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
     }
 });
 BI.TextIconNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_icon_node", BI.TextIconNode);
\ No newline at end of file
+BI.shortcut("bi.text_icon_node", BI.TextIconNode);
diff --git a/src/base/single/button/node/textnode.js b/src/base/single/button/node/textnode.js
index 2c7cdbda0..74974456c 100644
--- a/src/base/single/button/node/textnode.js
+++ b/src/base/single/button/node/textnode.js
@@ -19,8 +19,8 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
-        BI.TextNode.superclass._init.apply(this, arguments);
+
+    render: function () {
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",
@@ -74,4 +74,4 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
     }
 });
 BI.TextNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_node", BI.TextNode);
\ No newline at end of file
+BI.shortcut("bi.text_node", BI.TextNode);
diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js
index 6bff9decf..3191e4aeb 100644
--- a/src/base/single/editor/editor.js
+++ b/src/base/single/editor/editor.js
@@ -26,8 +26,7 @@ BI.Editor = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
-        BI.Editor.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         // 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
         var autocomplete = o.autocomplete ? " autocomplete=" + o.autocomplete : "";
diff --git a/src/base/single/editor/editor.multifile.js b/src/base/single/editor/editor.multifile.js
index f9577f373..81fdd78e7 100644
--- a/src/base/single/editor/editor.multifile.js
+++ b/src/base/single/editor/editor.multifile.js
@@ -18,8 +18,7 @@ BI.MultifileEditor = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
-        var self = this, o = this.options;
+    render: function () {
         BI.MultifileEditor.superclass._init.apply(this, arguments);
         this.file = BI.createWidget({
             type: "bi.file",
diff --git a/src/base/single/icon/icon.js b/src/base/single/icon/icon.js
index 105df72e2..112ea539a 100644
--- a/src/base/single/icon/icon.js
+++ b/src/base/single/icon/icon.js
@@ -11,11 +11,11 @@ BI.Icon = BI.inherit(BI.Single, {
             baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block"
         });
     },
-    _init: function () {
-        BI.Icon.superclass._init.apply(this, arguments);
+
+    render: function () {
         if (BI.isIE9Below && BI.isIE9Below()) {
             this.element.addClass("hack");
         }
     }
 });
-BI.shortcut("bi.icon", BI.Icon);
\ No newline at end of file
+BI.shortcut("bi.icon", BI.Icon);
diff --git a/src/base/single/iframe/iframe.js b/src/base/single/iframe/iframe.js
index 7aee46064..a7137fa58 100644
--- a/src/base/single/iframe/iframe.js
+++ b/src/base/single/iframe/iframe.js
@@ -18,9 +18,8 @@ BI.Iframe = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
+    render: function () {
         var self = this;
-        BI.Iframe.superclass._init.apply(this, arguments);
         this.element.on("load", function () {
             self.fireEvent("EVENT_LOADED");
         });
diff --git a/src/base/single/input/file.js b/src/base/single/input/file.js
index 9e80091fe..bf4e207b9 100644
--- a/src/base/single/input/file.js
+++ b/src/base/single/input/file.js
@@ -451,9 +451,8 @@
             });
         },
 
-        _init: function () {
+        render: function () {
             var self = this, o = this.options;
-            BI.File.superclass._init.apply(this, arguments);
             if (o.multiple === true) {
                 this.element.attr("multiple", "multiple");
             }
diff --git a/src/base/single/input/input.js b/src/base/single/input/input.js
index c5f284365..837d6d205 100644
--- a/src/base/single/input/input.js
+++ b/src/base/single/input/input.js
@@ -16,8 +16,7 @@ BI.Input = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
-        BI.Input.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this;
         var ctrlKey = false;
         var keyCode = null;
diff --git a/src/base/single/input/radio/radio.image.js b/src/base/single/input/radio/radio.image.js
index 744bb511a..e362592e4 100644
--- a/src/base/single/input/radio/radio.image.js
+++ b/src/base/single/input/radio/radio.image.js
@@ -17,10 +17,6 @@ BI.ImageRadio = BI.inherit(BI.IconButton, {
         });
     },
 
-    _init: function () {
-        BI.ImageRadio.superclass._init.apply(this, arguments);
-    },
-
     doClick: function () {
         BI.ImageRadio.superclass.doClick.apply(this, arguments);
         if(this.isValid()) {
@@ -30,4 +26,4 @@ BI.ImageRadio = BI.inherit(BI.IconButton, {
 });
 BI.ImageRadio.EVENT_CHANGE = BI.IconButton.EVENT_CHANGE;
 
-BI.shortcut("bi.image_radio", BI.ImageRadio);
\ No newline at end of file
+BI.shortcut("bi.image_radio", BI.ImageRadio);
diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js
index d5a377fae..c9a6eb608 100644
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@@ -38,9 +38,7 @@
             };
         },
 
-        _init: function () {
-            BI.AbstractLabel.superclass._init.apply(this, arguments);
-
+        render: function () {
             if (this.options.textAlign === "center") {
                 this._createCenterEl();
             } else {
diff --git a/src/base/single/label/icon.label.js b/src/base/single/label/icon.label.js
index a09a17266..ffc06fc73 100644
--- a/src/base/single/label/icon.label.js
+++ b/src/base/single/label/icon.label.js
@@ -11,8 +11,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
         iconHeight: null
     },
 
-    _init: function () {
-        BI.IconLabel.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.element.css({
             textAlign: "center"
diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js
index 663d856ee..afd444fd1 100644
--- a/src/base/single/tip/tip.toast.js
+++ b/src/base/single/tip/tip.toast.js
@@ -18,8 +18,8 @@ BI.Toast = BI.inherit(BI.Tip, {
             level: "success" // success或warning
         });
     },
-    _init: function () {
-        BI.Toast.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth / BI.pixRatio + BI.pixUnit
diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js
index 83b8650fe..ca206a849 100644
--- a/src/base/single/tip/tip.tooltip.js
+++ b/src/base/single/tip/tip.tooltip.js
@@ -20,8 +20,8 @@ BI.Tooltip = BI.inherit(BI.Tip, {
             stopPropagation: false
         });
     },
-    _init: function () {
-        BI.Tooltip.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this, o = this.options;
         this.element.addClass("tooltip-" + o.level);
         var fn = function (e) {
@@ -81,4 +81,4 @@ BI.Tooltip = BI.inherit(BI.Tip, {
     }
 });
 
-BI.shortcut("bi.tooltip", BI.Tooltip);
\ No newline at end of file
+BI.shortcut("bi.tooltip", BI.Tooltip);
diff --git a/src/base/single/trigger/trigger.js b/src/base/single/trigger/trigger.js
index 8c881bf6f..9e97d2226 100644
--- a/src/base/single/trigger/trigger.js
+++ b/src/base/single/trigger/trigger.js
@@ -13,10 +13,6 @@ BI.Trigger = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
-        BI.Trigger.superclass._init.apply(this, arguments);
-    },
-
     setKey: function () {
 
     },
@@ -24,4 +20,4 @@ BI.Trigger = BI.inherit(BI.Single, {
     getKey: function () {
 
     },
-});
\ No newline at end of file
+});
diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js
index 0bfea2611..2fa9999ea 100644
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/src/case/combo/bubblecombo/popup.bubble.js
@@ -13,9 +13,6 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
             maxWidth: 300,
             minHeight: 90
         });
-    },
-    _init: function () {
-        BI.BubblePopupView.superclass._init.apply(this, arguments);
     }
 });
 
diff --git a/src/core/4.widget.js b/src/core/4.widget.js
index 539ad078d..efe65049d 100644
--- a/src/core/4.widget.js
+++ b/src/core/4.widget.js
@@ -38,7 +38,7 @@
                 baseCls: "",
                 extraCls: "",
                 cls: "",
-                css: null,
+                css: null
 
                 // vdom: false
             });
@@ -157,9 +157,21 @@
         },
 
         _initCurrent: function () {
-            var o = this.options;
-            if (o._baseCls || o.baseCls || o.extraCls || o.cls) {
-                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || "") + " " + (o.cls || ""));
+            var self = this, o = this.options;
+            if (o._baseCls || o.baseCls || o.extraCls) {
+                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || ""));
+            }
+            if (o.cls) {
+                if (BI.isFunction(o.cls)) {
+                    var cls = this.__watch(o.cls, function (newValue) {
+                        if (newValue !== cls) {
+                            self.element.removeClass(cls).addClass(cls = newValue);
+                        }
+                    });
+                    this.element.addClass(cls);
+                } else {
+                    this.element.addClass(o.cls);
+                }
             }
             if (o.key != null) {
                 this.element.attr("key", o.key);
@@ -171,7 +183,30 @@
                 this.element.data(o.data);
             }
             if (o.css) {
-                this.element.css(o.css);
+                if (BI.isFunction(o.css)) {
+                    var css = this.__watch(o.css, function (newValue) {
+                        for (var k in css) {
+                            if (!newValue[k]) {
+                                newValue[k] = "";
+                            }
+                        }
+                        self.element.css(css = newValue);
+                    });
+                    this.element.css(css);
+                } else {
+                    this.element.css(o.css);
+                }
+            }
+        },
+
+        __watch: function (getter, handler) {
+            if (Fix.Model.target) {
+                this._watchers = this._watchers || [];
+                var watcher = new Fix.Watcher(Fix.Model.target, BI.bind(getter, this), handler || BI.emptyFn);
+                this._watchers.push(watcher);
+                return watcher.value;
+            } else {
+                return getter();
             }
         },
 
@@ -233,6 +268,9 @@
                     this.setValid(false);
                 }
             }
+            if (o.effect) {
+                this.__watch(o.effect);
+            }
         },
 
         _initState: function () {