diff --git a/packages/devui-vue/devui/splitter/src/splitter-bar.tsx b/packages/devui-vue/devui/splitter/src/splitter-bar.tsx
index 949640cc016fb7acee67fb82e12cc375da5b82e4..f98f9311bb6e2c10c85df79e9070d0b6335a3e7e 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-bar.tsx
+++ b/packages/devui-vue/devui/splitter/src/splitter-bar.tsx
@@ -25,22 +25,21 @@ export default defineComponent({
       wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`,
     })
     const domRef = ref<null | HTMLElement>()
-    onMounted(() => {
-      watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
-        if (!(ele instanceof HTMLElement)) {
-          return;
-        }
-        setStyle(ele, { flexBasis: curSplitBarSize })
-      }, { immediate: true })
 
-      watch([() => store.state.panes, domRef], ([panes, ele]) => {
-        if (!store.isStaticBar(props.index)) {
-          state.wrapperClass += ' resizable'
-        } else {
-          setStyle(ele, { flexBasis: props.disabledBarSize })
-        }
-      }, { deep: true })
-    })
+    watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
+      if (!(ele instanceof HTMLElement)) {
+        return;
+      }
+      setStyle(ele, { flexBasis: curSplitBarSize })
+    }, { immediate: true })
+
+    watch([() => store.state.panes, domRef], ([panes, ele]) => {
+      if (!store.isStaticBar(props.index)) {
+        state.wrapperClass += ' resizable'
+      } else {
+        setStyle(ele, { flexBasis: props.disabledBarSize })
+      }
+    }, { deep: true })
 
     // 指令输入值
     const coordinate = { pageX: 0, pageY: 0, originalX: 0, originalY: 0 }
diff --git a/packages/devui-vue/devui/splitter/src/splitter-pane.tsx b/packages/devui-vue/devui/splitter/src/splitter-pane.tsx
index 55760c696a49337e9920e28f48b7fb38c07d5b83..98ee3893e0c0d5fe90abda0cc64d25c855fc074c 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-pane.tsx
+++ b/packages/devui-vue/devui/splitter/src/splitter-pane.tsx
@@ -2,7 +2,6 @@ import {
   defineComponent,
   ref,
   watch,
-  nextTick,
   inject,
   onMounted,
   onUpdated,
@@ -31,12 +30,10 @@ export default defineComponent({
     );
 
     // pane 初始化大小
-    const setSizeStyle = (curSize: string) => {
-      const ele = domRef.value;
+    const setSizeStyle = (curSize: string, ele: HTMLElement) => {
       if (!ele) {
         return;
       }
-
       ele.style.flexBasis = curSize;
       const paneFixedClass = 'devui-splitter-pane-fixed';
       if (curSize) {
@@ -48,8 +45,10 @@ export default defineComponent({
     };
 
     watch(
-      () => props.size,
-      setSizeStyle,
+      [() => props.size, domRef],
+      ([size, ele]) => {
+        setSizeStyle(size, ele);
+      },
       { immediate: true }
     );
 
diff --git a/packages/devui-vue/docs/components/splitter/index.md b/packages/devui-vue/docs/components/splitter/index.md
index c231ea9e9cf85c8ff422f27901d37653142bd961..e24e1f636d0f48c65b67b9403cdec2bf41272371 100644
--- a/packages/devui-vue/docs/components/splitter/index.md
+++ b/packages/devui-vue/docs/components/splitter/index.md
@@ -77,20 +77,6 @@ export default defineComponent({
 ```
 :::
 
-
- <!-- `<style lang="scss"></style>` 的写法，在 `:::demo 语法中` 不起作用， 看了依赖包 `vitepress-theme-demoblock` 源码
-是渲染的正则表达式只匹配 `<style></style>` 这种写法，TODO：待后续优化 
-<style lang="scss"> 
-@import "@devui/style/theme/color";
-
-.pane-content {
-  padding: 0 12px;
-}
-
-.splitter-border {
-  border: 1px solid $devui-dividing-line;
-}-->
-
 ### 垂直布局用法
 
 :::demo