diff --git a/packages/vue-generator/test/testcases/data-binding/advanced.test.js b/packages/vue-generator/test/testcases/data-binding/advanced.test.js
new file mode 100644
index 0000000000..ce2b53eb03
--- /dev/null
+++ b/packages/vue-generator/test/testcases/data-binding/advanced.test.js
@@ -0,0 +1,103 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import { generateApp } from '@/generator/generateApp'
+import { advancedDataBindingSchema } from './mockData'
+
+describe('Advanced Data Binding', () => {
+  test('should generate v-model for nested object bindings', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(advancedDataBindingSchema)
+    const { genResult, errors } = res
+
+    // 检查是否有错误
+    expect(errors).toHaveLength(0)
+
+    // 找到生成的 Vue 页面文件
+    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证包含 v-model 绑定
+    expect(content).toContain('v-model')
+
+    // 验证嵌套对象数据绑定
+    expect(content).toContain('v-model="state.formData.address.detail"')
+    expect(content).toContain('v-model="state.formData.address.zipCode"')
+
+    // 验证基础字段绑定
+    expect(content).toContain('v-model="state.formData.username"')
+    expect(content).toContain('v-model="state.formData.enabled"')
+    expect(content).toContain('v-model="state.formData.gender"')
+    expect(content).toContain('v-model="state.formData.remarks"')
+    expect(content).toContain('v-model="state.formData.category"')
+
+    // 写入测试结果文件
+    const outputDir = path.resolve(__dirname, './result/advanced')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should handle multiple component types with data binding', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(advancedDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 统计 v-model 绑定数量
+    const vModelMatches = content.match(/v-model[^=]*="[^"]+"/g) || []
+
+    // 应该有8个 v-model 绑定
+    expect(vModelMatches).toHaveLength(8)
+
+    // 验证所有组件类型都正确生成
+    expect(content).toContain('<tiny-input')
+    expect(content).toContain('<tiny-switch')
+    expect(content).toContain('<tiny-radio')
+    expect(content).toContain('<textarea')
+    expect(content).toContain('<select')
+  })
+
+  test('should generate reactive state for nested objects', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(advancedDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证嵌套状态对象结构
+    expect(content).toContain('formData: {')
+    expect(content).toContain('address: {')
+    expect(content).toContain("detail: ''")
+    expect(content).toContain("zipCode: ''")
+
+    // 验证状态是响应式的
+    expect(content).toContain('vue.reactive(')
+  })
+
+  test('should handle radio button groups correctly', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(advancedDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证单选框组绑定到同一个字段
+    const genderBindings = content.match(/v-model="state\.formData\.gender"/g) || []
+    expect(genderBindings).toHaveLength(2) // 两个单选框绑定到同一字段
+
+    // 验证单选框的 value 属性
+    expect(content).toContain('value="male"')
+    expect(content).toContain('value="female"')
+  })
+})
diff --git a/packages/vue-generator/test/testcases/data-binding/basic.test.js b/packages/vue-generator/test/testcases/data-binding/basic.test.js
new file mode 100644
index 0000000000..f0d578fba5
--- /dev/null
+++ b/packages/vue-generator/test/testcases/data-binding/basic.test.js
@@ -0,0 +1,70 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import { generateApp } from '@/generator/generateApp'
+import { basicDataBindingSchema } from './mockData'
+
+describe('Basic Data Binding', () => {
+  test('should generate v-model for basic form components', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(basicDataBindingSchema)
+    const { genResult, errors } = res
+
+    // 检查是否有错误
+    expect(errors).toHaveLength(0)
+
+    // 找到生成的 Vue 页面文件
+    const vueFile = genResult.find((file) => file.fileName === 'BasicDataBindingPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证包含 v-model 绑定
+    expect(content).toContain('v-model')
+
+    // 验证具体的数据绑定
+    expect(content).toContain('v-model="state.username"')
+    expect(content).toContain('v-model="state.role"')
+    expect(content).toContain('v-model="state.agreed"')
+
+    // 验证组件正确渲染
+    expect(content).toContain('<tiny-input')
+    expect(content).toContain('<tiny-select')
+    expect(content).toContain('<input')
+
+    // 验证状态定义
+    expect(content).toContain("username: ''")
+    expect(content).toContain("role: ''")
+    expect(content).toContain('agreed: false')
+
+    // 写入测试结果文件（可选，用于调试）
+    const outputDir = path.resolve(__dirname, './result/basic')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should handle different component types correctly', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(basicDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'BasicDataBindingPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证不同组件类型的 v-model 生成
+    const vModelMatches = content.match(/v-model[^=]*="[^"]+"/g) || []
+
+    // 应该有3个 v-model 绑定
+    expect(vModelMatches).toHaveLength(3)
+
+    // 验证每个绑定都是正确的
+    expect(vModelMatches).toContain('v-model="state.username"')
+    expect(vModelMatches).toContain('v-model="state.role"')
+    expect(vModelMatches).toContain('v-model="state.agreed"')
+  })
+})
diff --git a/packages/vue-generator/test/testcases/data-binding/edge-case.test.js b/packages/vue-generator/test/testcases/data-binding/edge-case.test.js
new file mode 100644
index 0000000000..03c60e8af4
--- /dev/null
+++ b/packages/vue-generator/test/testcases/data-binding/edge-case.test.js
@@ -0,0 +1,122 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import { generateApp } from '@/generator/generateApp'
+import { edgeCaseDataBindingSchema } from './mockData'
+
+describe('Edge Case Data Binding Tests', () => {
+  test('should handle empty field gracefully', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(edgeCaseDataBindingSchema)
+    const { genResult, errors } = res
+
+    // 不应该因为空字段而报错
+    expect(errors).toHaveLength(0)
+
+    const vueFile = genResult.find((file) => file.fileName === 'EdgeCaseDataBindingPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 空字段应该不生成v-model或生成空的v-model
+    // 确保不会导致语法错误
+    expect(content).not.toContain('v-model=""')
+    expect(content).not.toContain('v-model="undefined"')
+  })
+
+  test('should remove this. prefix correctly', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(edgeCaseDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'EdgeCaseDataBindingPage.vue')
+    const content = vueFile.fileContent
+
+    // 应该移除this.前缀
+    expect(content).toContain('v-model="state.withThis"')
+    expect(content).not.toContain('v-model="this.state.withThis"')
+  })
+
+  test('should handle deep nested field paths', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(edgeCaseDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'EdgeCaseDataBindingPage.vue')
+    const content = vueFile.fileContent
+
+    // 深层嵌套路径应该正确处理
+    expect(content).toContain('v-model="state.level1.level2.level3.deepField"')
+
+    // 验证状态结构正确生成
+    expect(content).toContain('level1: {')
+    expect(content).toContain('level2: {')
+    expect(content).toContain('level3: {')
+    expect(content).toContain("deepField: ''")
+  })
+
+  test('should maintain correct state structure for nested objects', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(edgeCaseDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'EdgeCaseDataBindingPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证响应式状态结构
+    expect(content).toContain('vue.reactive(')
+    expect(content).toContain("noComponentType: ''")
+    expect(content).toContain("withThis: ''")
+
+    // 写入测试结果
+    const outputDir = path.resolve(__dirname, './result/edge-case')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should handle null and undefined values in JSDataBinding', async () => {
+    // 创建包含null/undefined值的特殊schema
+    const nullValueSchema = {
+      ...edgeCaseDataBindingSchema,
+      pageSchema: [
+        {
+          ...edgeCaseDataBindingSchema.pageSchema[0],
+          children: [
+            {
+              componentName: 'TinyInput',
+              props: {
+                modelValue: {
+                  type: 'JSDataBinding',
+                  value: null // null值
+                }
+              }
+            },
+            {
+              componentName: 'TinyInput',
+              props: {
+                modelValue: {
+                  type: 'JSDataBinding',
+                  value: undefined // undefined值
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+
+    const instance = generateApp()
+    const res = await instance.generate(nullValueSchema)
+
+    // 不应该因为null/undefined而抛出异常
+    expect(res.errors).toHaveLength(0)
+
+    const vueFile = res.genResult.find((file) => file.fileName === 'EdgeCaseDataBindingPage.vue')
+    expect(vueFile).toBeDefined()
+  })
+})
diff --git a/packages/vue-generator/test/testcases/data-binding/form.test.js b/packages/vue-generator/test/testcases/data-binding/form.test.js
new file mode 100644
index 0000000000..a428a180ff
--- /dev/null
+++ b/packages/vue-generator/test/testcases/data-binding/form.test.js
@@ -0,0 +1,140 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import { generateApp } from '@/generator/generateApp'
+import { complexFormDataBindingSchema } from './mockData'
+
+describe('Complex Form Data Binding Tests', () => {
+  test('should handle nested form sections with data binding', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult, errors } = res
+
+    expect(errors).toHaveLength(0)
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证嵌套表单数据绑定
+    expect(content).toContain('v-model="state.user.profile.name"')
+    expect(content).toContain('v-model="state.user.profile.email"')
+    expect(content).toContain('v-model="state.user.preferences.language"')
+    expect(content).toContain('v-model="state.user.preferences.emailNotifications"')
+  })
+
+  test('should generate correct nested state structure', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证复杂嵌套状态结构
+    expect(content).toContain('user: {')
+    expect(content).toContain('profile: {')
+    expect(content).toContain("name: ''")
+    expect(content).toContain("email: ''")
+    expect(content).toContain('preferences: {')
+    expect(content).toContain("language: ''")
+    expect(content).toContain('emailNotifications: false')
+  })
+
+  test('should handle multiple component types in complex form', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证不同组件类型
+    expect(content).toContain('<tiny-input') // 输入框
+    expect(content).toContain('<tiny-select') // 选择框
+    expect(content).toContain('<tiny-checkbox') // 复选框
+
+    // 验证特殊属性
+    expect(content).toContain('type="email"') // email类型输入框
+    expect(content).toContain('label="接收邮件通知"') // checkbox标签
+  })
+
+  test('should maintain component hierarchy and styling', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证HTML结构和样式类
+    expect(content).toContain('<div class="complex-form">')
+    expect(content).toContain('class="user-section"')
+    expect(content).toContain('class="preferences-section"')
+
+    // 验证嵌套div结构
+    expect(content).toMatch(/<div[^>]*class="user-section"[^>]*>[\s\S]*<tiny-input[\s\S]*<\/div>/)
+  })
+
+  test('should count correct number of v-model bindings', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 统计v-model数量
+    const vModelMatches = content.match(/v-model[^=]*="[^"]+"/g) || []
+    expect(vModelMatches).toHaveLength(4) // 4个表单字段
+
+    // 验证每个绑定都是唯一的
+    const uniqueBindings = new Set(vModelMatches)
+    expect(uniqueBindings.size).toBe(4)
+  })
+
+  test('should handle different input types correctly', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证不同输入类型的处理
+    expect(content).toContain('placeholder="姓名"')
+    expect(content).toContain('placeholder="邮箱"')
+    expect(content).toContain('placeholder="语言偏好"')
+
+    // 验证email类型特殊处理
+    expect(content).toContain('type="email"')
+
+    // 写入测试结果
+    const outputDir = path.resolve(__dirname, './result/complex-form')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should generate proper component imports', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexFormDataBindingSchema)
+    const { genResult } = res
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const content = vueFile.fileContent
+
+    // 验证组件导入
+    expect(content).toContain(
+      "import { Input as TinyInput, Select as TinySelect, Checkbox as TinyCheckbox } from '@opentiny/vue'"
+    )
+
+    // 验证Vue导入
+    expect(content).toContain("import * as vue from 'vue'")
+  })
+})
diff --git a/packages/vue-generator/test/testcases/data-binding/mockData.js b/packages/vue-generator/test/testcases/data-binding/mockData.js
new file mode 100644
index 0000000000..c5425a1a42
--- /dev/null
+++ b/packages/vue-generator/test/testcases/data-binding/mockData.js
@@ -0,0 +1,451 @@
+/**
+ * 数据绑定功能测试的模拟数据
+ */
+
+// 基础数据绑定测试 Schema
+export const basicDataBindingSchema = {
+  meta: {
+    name: 'BasicDataBindingTest',
+    description: 'Test basic data binding functionality'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinySelect',
+      exportName: 'Select',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'BasicDataBindingPage',
+      meta: {
+        id: 'basic-page',
+        isPage: true,
+        parentId: '0',
+        router: '/basic-data-binding'
+      },
+      props: {
+        class: 'test-container'
+      },
+      children: [
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '请输入用户名',
+            // 测试数据绑定 - 输入框绑定到用户名字段
+            modelValue: {
+              type: 'JSExpression',
+              value: 'state.username',
+              model: true
+            }
+          }
+        },
+        {
+          componentName: 'TinySelect',
+          props: {
+            placeholder: '请选择角色',
+            // 测试数据绑定 - 选择框绑定到角色字段
+            modelValue: {
+              type: 'JSExpression',
+              value: 'state.role',
+              model: true
+            }
+          }
+        },
+        {
+          componentName: 'input',
+          props: {
+            type: 'checkbox',
+            // 测试原生checkbox的数据绑定
+            checked: {
+              type: 'JSExpression',
+              value: 'state.agreed',
+              model: true
+            }
+          }
+        }
+      ],
+      state: {
+        username: '',
+        role: '',
+        agreed: false
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
+
+// 高级数据绑定测试 Schema
+export const advancedDataBindingSchema = {
+  meta: {
+    name: 'AdvancedDataBindingTest',
+    description: 'Test advanced data binding functionality with nested objects'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinySelect',
+      exportName: 'Select',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinySwitch',
+      exportName: 'Switch',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinyRadio',
+      exportName: 'Radio',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'AdvancedFormPage',
+      meta: {
+        id: 'advanced-page',
+        isPage: true,
+        parentId: '0',
+        router: '/advanced-form'
+      },
+      props: {
+        class: 'advanced-form-container'
+      },
+      children: [
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '请输入用户名',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.username'
+            }
+          }
+        },
+        {
+          componentName: 'TinySwitch',
+          props: {
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.enabled'
+            }
+          }
+        },
+        {
+          componentName: 'TinyRadio',
+          props: {
+            value: 'male',
+            checked: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.gender'
+            }
+          }
+        },
+        {
+          componentName: 'TinyRadio',
+          props: {
+            value: 'female',
+            checked: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.gender'
+            }
+          }
+        },
+        {
+          componentName: 'textarea',
+          props: {
+            placeholder: '请输入备注',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.remarks'
+            }
+          }
+        },
+        {
+          componentName: 'select',
+          props: {
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.category'
+            }
+          }
+        },
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '详细地址',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.address.detail'
+            }
+          }
+        },
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '邮政编码',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.formData.address.zipCode'
+            }
+          }
+        }
+      ],
+      state: {
+        formData: {
+          username: '',
+          enabled: false,
+          gender: '',
+          remarks: '',
+          category: '',
+          address: {
+            detail: '',
+            zipCode: ''
+          }
+        }
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
+
+// 边界条件测试 Schema
+export const edgeCaseDataBindingSchema = {
+  meta: {
+    name: 'EdgeCaseDataBindingTest',
+    description: 'Test edge cases and error handling for data binding'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'EdgeCaseDataBindingPage',
+      meta: {
+        id: 'edge-case-page',
+        isPage: true,
+        parentId: '0',
+        router: '/edge-case-data-binding'
+      },
+      props: {
+        class: 'edge-case-container'
+      },
+      children: [
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '空字段测试',
+            modelValue: {
+              type: 'JSExpression',
+              value: '' // 空字段
+            }
+          }
+        },
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: 'this前缀清理',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'this.state.withThis'
+            }
+          }
+        },
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '深层嵌套',
+            modelValue: {
+              type: 'JSExpression',
+              model: true,
+              value: 'state.level1.level2.level3.deepField'
+            }
+          }
+        }
+      ],
+      state: {
+        noComponentType: '',
+        withThis: '',
+        level1: {
+          level2: {
+            level3: {
+              deepField: ''
+            }
+          }
+        }
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
+
+// 复杂表单测试 Schema
+export const complexFormDataBindingSchema = {
+  meta: {
+    name: 'ComplexFormDataBindingTest',
+    description: 'Test complex form with multiple data binding scenarios'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinySelect',
+      exportName: 'Select',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinyCheckbox',
+      exportName: 'Checkbox',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'form',
+      fileName: 'ComplexFormPage',
+      meta: {
+        id: 'complex-form-page',
+        isPage: true,
+        parentId: '0',
+        router: '/complex-form'
+      },
+      props: {
+        class: 'complex-form'
+      },
+      children: [
+        // 用户信息部分
+        {
+          componentName: 'div',
+          props: { class: 'user-section' },
+          children: [
+            {
+              componentName: 'TinyInput',
+              props: {
+                placeholder: '姓名',
+                modelValue: {
+                  type: 'JSExpression',
+                  model: true,
+                  value: 'state.user.profile.name'
+                }
+              }
+            },
+            {
+              componentName: 'TinyInput',
+              props: {
+                type: 'email',
+                placeholder: '邮箱',
+                modelValue: {
+                  type: 'JSExpression',
+                  model: true,
+                  value: 'state.user.profile.email'
+                }
+              }
+            }
+          ]
+        },
+        // 偏好设置部分
+        {
+          componentName: 'div',
+          props: { class: 'preferences-section' },
+          children: [
+            {
+              componentName: 'TinySelect',
+              props: {
+                placeholder: '语言偏好',
+                modelValue: {
+                  type: 'JSExpression',
+                  model: true,
+                  value: 'state.user.preferences.language'
+                }
+              }
+            },
+            {
+              componentName: 'TinyCheckbox',
+              props: {
+                label: '接收邮件通知',
+                checked: {
+                  type: 'JSExpression',
+                  model: true,
+                  value: 'state.user.preferences.emailNotifications'
+                }
+              }
+            }
+          ]
+        }
+      ],
+      state: {
+        user: {
+          profile: {
+            name: '',
+            email: ''
+          },
+          preferences: {
+            language: '',
+            emailNotifications: false
+          }
+        }
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/package.json b/packages/vue-generator/test/testcases/generator/expected/appdemo01/package.json
index a404389d7b..6f3161e7ca 100644
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/package.json
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/package.json
@@ -11,8 +11,8 @@
   "module": "dist/index.js",
   "dependencies": {
     "@opentiny/tiny-engine-i18n-host": "^1.0.0",
-    "@opentiny/vue": "0.1.16",
-    "@opentiny/vue-icon": "0.1.16",
+    "@opentiny/vue": "3.24.0",
+    "@opentiny/vue-icon": "3.24.0",
     "axios": "latest",
     "axios-mock-adapter": "^1.19.0",
     "vue": "^3.3.9",
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js
index 53ad88c6ec..70c3c74f30 100644
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js
@@ -28,6 +28,12 @@ const routes = [
           name: '3sV9KkvL3SuQIufS'
         }
       },
+      {
+        name: 'lifecycle-page',
+        path: 'lifecycle',
+        component: () => import('@/views/LifeCyclePage.vue'),
+        children: []
+      },
       {
         name: '1737797330916',
         path: 'testCanvasRowCol',
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/LifeCyclePage.vue b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/LifeCyclePage.vue
new file mode 100644
index 0000000000..fddf898275
--- /dev/null
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/LifeCyclePage.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="lifecycle-container">
+    <tiny-card title="仪表板">
+      <div class="metrics-grid">
+        <div class="metric-item">
+          <span>{{ '活跃用户: ' + state.activeUsers }}</span>
+        </div>
+        <div class="metric-item">
+          <span>{{ '系统负载: ' + state.systemLoad + '%' }}</span>
+        </div>
+      </div>
+      <tiny-button type="success" @click="refreshData">刷新数据</tiny-button></tiny-card
+    >
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Card as TinyCard } from '@opentiny/vue'
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({ activeUsers: 0, systemLoad: 0, lastUpdateTime: null, autoRefresh: true })
+wrap({ state })
+
+const refreshData = wrap(function refreshData() {
+  this.fetchMetrics()
+  this.state.lastUpdateTime = new Date()
+})
+const fetchMetrics = wrap(function fetchMetrics() {
+  this.state.activeUsers = Math.floor(Math.random() * 1000)
+  this.state.systemLoad = Math.floor(Math.random() * 100)
+})
+const startAutoRefresh = wrap(function startAutoRefresh() {
+  if (this.autoRefresh) {
+    this.refreshInterval = setInterval(() => this.refreshData(), 30000)
+  }
+})
+const stopAutoRefresh = wrap(function stopAutoRefresh() {
+  if (this.refreshInterval) {
+    clearInterval(this.refreshInterval)
+    this.refreshInterval = null
+  }
+})
+const handleVisibilityChange = wrap(function handleVisibilityChange() {
+  if (document.hidden) {
+    this.stopAutoRefresh()
+  } else {
+    this.startAutoRefresh()
+  }
+})
+
+wrap({ refreshData, fetchMetrics, startAutoRefresh, stopAutoRefresh, handleVisibilityChange })
+
+vue.onMounted(
+  wrap(function onMounted() {
+    console.log('onMounted.')
+    refreshData()
+    startAutoRefresh()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+  })
+)
+vue.onUnmounted(
+  wrap(function onUnmounted() {
+    console.log('onUnmounted.')
+    stopAutoRefresh()
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+  })
+)
+vue.onActivated(
+  wrap(function onActivated() {
+    console.log('页面激活')
+    refreshData()
+  })
+)
+vue.onDeactivated(
+  wrap(function onDeactivated() {
+    console.log('页面停用')
+    stopAutoRefresh()
+  })
+)
+vue.onUpdated(
+  wrap(function onUpdated() {
+    console.log('页面已更新', this.state.loginCount)
+  })
+)
+vue.onBeforeMount(
+  wrap(function onBeforeMount() {
+    console.log('onBeforeMount.')
+  })
+)
+</script>
+<style scoped></style>
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue
index 57881bbb7a..7fae2266cb 100644
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue
@@ -55,7 +55,7 @@
         >
         <tiny-form-item label="可用区" style="border-radius: 0px">
           <tiny-button-group
-            modelValue="1"
+            v-model="state.selectValues.availableZone"
             :data="[
               { text: '可用区1', value: '1' },
               { text: '可用区2', value: '2' },
@@ -89,7 +89,7 @@
       >
         <tiny-form-item label="CPU架构">
           <tiny-button-group
-            modelValue="1"
+            v-model="state.formData.cpu"
             :data="[
               { text: 'x86计算', value: '1' },
               { text: '鲲鹏计算', value: '2' }
@@ -101,8 +101,8 @@
             <div style="display: flex; align-items: center; margin-right: 10px">
               <span style="width: 80px">vCPUs</span>
               <tiny-select
-                modelValue=""
                 placeholder="请选择"
+                v-model="state.selectValues.cpuArch"
                 :options="[
                   { value: '1', label: '黄金糕' },
                   { value: '2', label: '双皮奶' }
@@ -112,8 +112,8 @@
             <div style="display: flex; align-items: center; margin-right: 10px">
               <span style="width: 80px; border-radius: 0px">内存</span>
               <tiny-select
-                modelValue=""
                 placeholder="请选择"
+                v-model="state.selectValues.memorySize"
                 :options="[
                   { value: '1', label: '黄金糕' },
                   { value: '2', label: '双皮奶' }
@@ -121,8 +121,8 @@
               ></tiny-select>
             </div>
             <div style="display: flex; align-items: center">
-              <span style="width: 80px">规格名称</span>
-              <tiny-search modelValue="" placeholder="输入关键词"></tiny-search>
+              <span style="width: 120px">规格名称</span>
+              <tiny-search placeholder="输入关键词" v-model="state.inputValues.diskLabel"></tiny-search>
             </div>
           </div>
           <div style="border-radius: 0px">
@@ -212,18 +212,18 @@
           ></tiny-button-group>
           <div style="display: flex; margin-top: 12px; border-radius: 0px">
             <tiny-select
-              modelValue=""
               placeholder="请选择"
               style="width: 170px; margin-right: 10px"
+              v-model="state.selectValues.storageOption"
               :options="[
                 { value: '1', label: '黄金糕' },
                 { value: '2', label: '双皮奶' }
               ]"
             ></tiny-select>
             <tiny-select
-              modelValue=""
               placeholder="请选择"
               style="width: 340px"
+              v-model="state.selectValues.networkOption"
               :options="[
                 { value: '1', label: '黄金糕' },
                 { value: '2', label: '双皮奶' }
@@ -262,15 +262,19 @@
         <tiny-form-item label="系统盘" style="border-radius: 0px">
           <div style="display: flex">
             <tiny-select
-              modelValue=""
               placeholder="请选择"
               style="width: 200px; margin-right: 10px"
+              v-model="state.formData.storageType"
               :options="[
                 { value: '1', label: '黄金糕' },
                 { value: '2', label: '双皮奶' }
               ]"
             ></tiny-select>
-            <tiny-input placeholder="请输入" modelValue="" style="width: 120px; margin-right: 10px"></tiny-input>
+            <tiny-input
+              placeholder="请输入"
+              style="width: 120px; margin-right: 10px"
+              v-model="state.inputValues.systemDisk"
+            ></tiny-input>
             <span style="color: #575d6c; font-size: 12px">GiB IOPS上限240，IOPS突发上限5,000</span>
           </div></tiny-form-item
         ></tiny-form
@@ -290,17 +294,21 @@
               fill="currentColor"
             ></tiny-icon-panel-mini>
             <tiny-select
-              modelValue=""
               placeholder="请选择"
               style="width: 200px; margin-right: 10px"
+              v-model="state.formData.diskType"
               :options="[
                 { value: '1', label: '黄金糕' },
                 { value: '2', label: '双皮奶' }
               ]"
             ></tiny-select>
-            <tiny-input placeholder="请输入" modelValue="" style="width: 120px; margin-right: 10px"></tiny-input>
+            <tiny-input
+              placeholder="请输入"
+              style="width: 120px; margin-right: 10px"
+              v-model="state.inputValues.dataDiskSize"
+            ></tiny-input>
             <span style="color: #575d6c; font-size: 12px; margin-right: 10px">GiB IOPS上限600，IOPS突发上限5,000</span>
-            <tiny-input placeholder="请输入" modelValue="" style="width: 120px"></tiny-input>
+            <tiny-input placeholder="请输入" style="width: 120px" v-model="state.inputValues.diskLabel"></tiny-input>
           </div>
           <div style="display: flex; margin-top: 12px; border-radius: 0px">
             <tiny-icon-plus style="width: 16px; height: 16px; margin-right: 10px" fill="currentColor"></tiny-icon-plus>
@@ -340,7 +348,11 @@
           <tiny-row style="border-radius: 0px">
             <tiny-col span="5" style="display: flex">
               <span style="margin-right: 10px">购买量</span>
-              <tiny-input placeholder="请输入" modelValue="" style="width: 120px; margin-right: 10px"></tiny-input>
+              <tiny-input
+                placeholder="请输入"
+                style="width: 120px; margin-right: 10px"
+                v-model="state.formData.instanceCount"
+              ></tiny-input>
               <span>台</span></tiny-col
             >
             <tiny-col span="7">
@@ -384,7 +396,8 @@ import {
   Form as TinyForm,
   Grid as TinyGrid,
   Select as TinySelect,
-  ButtonGroup as TinyButtonGroup
+  ButtonGroup as TinyButtonGroup,
+  Button as TinyButton
 } from '@opentiny/vue'
 import { IconPanelMini, IconPlus } from '@opentiny/vue-icon'
 import * as vue from 'vue'
@@ -400,7 +413,24 @@ const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
 const wrap = lowcodeWrap(props, { emit })
 wrap({ stores })
 
-const state = vue.reactive({ dataDisk: [1, 2, 3] })
+const state = vue.reactive({
+  dataDisk: [1, 2, 3],
+  formData: {
+    zone: '1',
+    cpu: '1',
+    memory: '1',
+    storageType: '1',
+    storageSize: '40',
+    diskType: '1',
+    diskSize: '100',
+    networkType: '1',
+    bandwidth: '1',
+    instanceType: '1',
+    instanceCount: '1'
+  },
+  inputValues: { diskLabel: '', systemDisk: '', dataDiskSize: '', networkConfig: '' },
+  selectValues: { availableZone: '1', cpuArch: '1', memorySize: '1', storageOption: '1', networkOption: '1' }
+})
 wrap({ state })
 </script>
 <style scoped>
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue
index 6ce6b8b7f9..e22893260e 100644
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue
@@ -40,8 +40,17 @@ const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
 const wrap = lowcodeWrap(props, { emit })
 wrap({ stores })
 
-const state = vue.reactive({ dataDisk: [1, 2, 3] })
+const state = vue.reactive({
+  canvasConfig: { rowGap: '20px', colGap: '20px', layoutMode: 'grid' },
+  uiState: { showGrid: true, selectedElement: null }
+})
 wrap({ state })
+
+const handleElementClick = wrap(function handleElementClick(elementId) {
+  this.state.uiState.selectedElement = elementId
+})
+
+wrap({ handleElementClick })
 </script>
 <style scoped>
 body {
diff --git a/packages/vue-generator/test/testcases/generator/mockData.js b/packages/vue-generator/test/testcases/generator/mockData.js
index 68ca4f0256..f77f938332 100644
--- a/packages/vue-generator/test/testcases/generator/mockData.js
+++ b/packages/vue-generator/test/testcases/generator/mockData.js
@@ -908,7 +908,36 @@ export const appSchemaDemo01 = {
     },
     {
       state: {
-        dataDisk: [1, 2, 3]
+        dataDisk: [1, 2, 3],
+        // 表单相关状态
+        formData: {
+          zone: '1',
+          cpu: '1',
+          memory: '1',
+          storageType: '1',
+          storageSize: '40',
+          diskType: '1',
+          diskSize: '100',
+          networkType: '1',
+          bandwidth: '1',
+          instanceType: '1',
+          instanceCount: '1'
+        },
+        // 输入框相关状态
+        inputValues: {
+          diskLabel: '',
+          systemDisk: '',
+          dataDiskSize: '',
+          networkConfig: ''
+        },
+        // 选择器相关状态
+        selectValues: {
+          availableZone: '1',
+          cpuArch: '1',
+          memorySize: '1',
+          storageOption: '1',
+          networkOption: '1'
+        }
       },
       methods: {},
       componentName: 'Page',
@@ -1055,7 +1084,11 @@ export const appSchemaDemo01 = {
                             value: '3'
                           }
                         ],
-                        modelValue: '1'
+                        modelValue: {
+                          type: 'JSExpression',
+                          model: true,
+                          value: 'state.selectValues.availableZone'
+                        }
                       },
                       id: '6184481b'
                     }
@@ -1104,7 +1137,11 @@ export const appSchemaDemo01 = {
                             value: '2'
                           }
                         ],
-                        modelValue: '1'
+                        modelValue: {
+                          type: 'JSExpression',
+                          model: true,
+                          value: 'state.formData.cpu'
+                        }
                       },
                       id: '7d33ced7'
                     }
@@ -1142,7 +1179,11 @@ export const appSchemaDemo01 = {
                             {
                               componentName: 'TinySelect',
                               props: {
-                                modelValue: '',
+                                modelValue: {
+                                  type: 'JSExpression',
+                                  model: true,
+                                  value: 'state.selectValues.cpuArch'
+                                },
                                 placeholder: '请选择',
                                 options: [
                                   {
@@ -1176,7 +1217,11 @@ export const appSchemaDemo01 = {
                             {
                               componentName: 'TinySelect',
                               props: {
-                                modelValue: '',
+                                modelValue: {
+                                  type: 'JSExpression',
+                                  model: true,
+                                  value: 'state.selectValues.memorySize'
+                                },
                                 placeholder: '请选择',
                                 options: [
                                   {
@@ -1204,15 +1249,19 @@ export const appSchemaDemo01 = {
                               componentName: 'Text',
                               props: {
                                 text: '规格名称',
-                                style: 'width: 80px;'
+                                style: 'width: 120px;'
                               },
                               id: 'd3eb6352'
                             },
                             {
                               componentName: 'TinySearch',
                               props: {
-                                modelValue: '',
-                                placeholder: '输入关键词'
+                                placeholder: '输入关键词',
+                                modelValue: {
+                                  type: 'JSExpression',
+                                  model: true,
+                                  value: 'state.inputValues.diskLabel'
+                                }
                               },
                               id: '21cb9282'
                             }
@@ -1417,7 +1466,11 @@ export const appSchemaDemo01 = {
                         {
                           componentName: 'TinySelect',
                           props: {
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.selectValues.storageOption'
+                            },
                             placeholder: '请选择',
                             options: [
                               {
@@ -1436,7 +1489,11 @@ export const appSchemaDemo01 = {
                         {
                           componentName: 'TinySelect',
                           props: {
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.selectValues.networkOption'
+                            },
                             placeholder: '请选择',
                             options: [
                               {
@@ -1515,7 +1572,11 @@ export const appSchemaDemo01 = {
                         {
                           componentName: 'TinySelect',
                           props: {
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.formData.storageType'
+                            },
                             placeholder: '请选择',
                             options: [
                               {
@@ -1535,7 +1596,11 @@ export const appSchemaDemo01 = {
                           componentName: 'TinyInput',
                           props: {
                             placeholder: '请输入',
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.inputValues.systemDisk'
+                            },
                             style: 'width: 120px; margin-right: 10px;'
                           },
                           id: '1cde4c0f'
@@ -1592,7 +1657,11 @@ export const appSchemaDemo01 = {
                         {
                           componentName: 'TinySelect',
                           props: {
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.formData.diskType'
+                            },
                             placeholder: '请选择',
                             options: [
                               {
@@ -1612,7 +1681,11 @@ export const appSchemaDemo01 = {
                           componentName: 'TinyInput',
                           props: {
                             placeholder: '请输入',
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.inputValues.dataDiskSize'
+                            },
                             style: 'width: 120px; margin-right: 10px;'
                           },
                           id: '667c7926'
@@ -1629,7 +1702,11 @@ export const appSchemaDemo01 = {
                           componentName: 'TinyInput',
                           props: {
                             placeholder: '请输入',
-                            modelValue: '',
+                            modelValue: {
+                              type: 'JSExpression',
+                              model: true,
+                              value: 'state.inputValues.diskLabel'
+                            },
                             style: 'width: 120px;'
                           },
                           id: '1bd56dc0'
@@ -1741,7 +1818,11 @@ export const appSchemaDemo01 = {
                               componentName: 'TinyInput',
                               props: {
                                 placeholder: '请输入',
-                                modelValue: '',
+                                modelValue: {
+                                  type: 'JSExpression',
+                                  model: true,
+                                  value: 'state.formData.instanceCount'
+                                },
                                 style: 'width: 120px; margin-right: 10px;'
                               },
                               id: '2f9cf442'
@@ -2027,6 +2108,23 @@ export const appSchemaDemo01 = {
         }
       ],
       fileName: 'testCanvasRowCol',
+      state: {
+        canvasConfig: {
+          rowGap: '20px',
+          colGap: '20px',
+          layoutMode: 'grid'
+        },
+        uiState: {
+          showGrid: true,
+          selectedElement: null
+        }
+      },
+      methods: {
+        handleElementClick: {
+          type: 'JSFunction',
+          value: 'function handleElementClick(elementId) { this.state.uiState.selectedElement = elementId; }'
+        }
+      },
       meta: {
         name: 'testCanvasRowCol',
         id: 1737797330916,
@@ -2089,6 +2187,142 @@ export const appSchemaDemo01 = {
         router: 'createVm/untitledFA/UntitledA'
       },
       path: 'createVm/untitledFA'
+    },
+    {
+      componentName: 'div',
+      fileName: 'LifeCyclePage',
+      meta: {
+        id: 'lifecycle-page',
+        isPage: true,
+        parentId: '0',
+        router: '/lifecycle'
+      },
+      props: {
+        class: 'lifecycle-container'
+      },
+      children: [
+        {
+          componentName: 'TinyCard',
+          props: {
+            title: '仪表板'
+          },
+          children: [
+            {
+              componentName: 'div',
+              props: {
+                class: 'metrics-grid'
+              },
+              children: [
+                {
+                  componentName: 'div',
+                  props: {
+                    class: 'metric-item'
+                  },
+                  children: [
+                    {
+                      componentName: 'Text',
+                      props: {
+                        text: {
+                          type: 'JSExpression',
+                          value: '"活跃用户: " + this.state.activeUsers'
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  componentName: 'div',
+                  props: {
+                    class: 'metric-item'
+                  },
+                  children: [
+                    {
+                      componentName: 'Text',
+                      props: {
+                        text: {
+                          type: 'JSExpression',
+                          value: '"系统负载: " + this.state.systemLoad + "%"'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              componentName: 'TinyButton',
+              props: {
+                type: 'success',
+                onClick: {
+                  type: 'JSExpression',
+                  value: 'this.refreshData'
+                }
+              },
+              children: ['刷新数据']
+            }
+          ]
+        }
+      ],
+      state: {
+        activeUsers: 0,
+        systemLoad: 0,
+        lastUpdateTime: null,
+        autoRefresh: true
+      },
+      methods: {
+        refreshData: {
+          type: 'JSFunction',
+          value: 'function refreshData() { this.fetchMetrics(); this.state.lastUpdateTime = new Date(); }'
+        },
+        fetchMetrics: {
+          type: 'JSFunction',
+          value:
+            'function fetchMetrics() { this.state.activeUsers = Math.floor(Math.random() * 1000); this.state.systemLoad = Math.floor(Math.random() * 100); }'
+        },
+        startAutoRefresh: {
+          type: 'JSFunction',
+          value:
+            'function startAutoRefresh() { if (this.autoRefresh) { this.refreshInterval = setInterval(() => this.refreshData(), 30000); } }'
+        },
+        stopAutoRefresh: {
+          type: 'JSFunction',
+          value:
+            'function stopAutoRefresh() { if (this.refreshInterval) { clearInterval(this.refreshInterval); this.refreshInterval = null; } }'
+        },
+        handleVisibilityChange: {
+          type: 'JSFunction',
+          value:
+            'function handleVisibilityChange() { if (document.hidden) { this.stopAutoRefresh(); } else { this.startAutoRefresh(); } }'
+        }
+      },
+      lifeCycles: {
+        onMounted: {
+          type: 'JSFunction',
+          value:
+            'function onMounted() { console.log("onMounted."); refreshData(); startAutoRefresh(); document.addEventListener("visibilitychange", handleVisibilityChange) }'
+        },
+        onUnmounted: {
+          type: 'JSFunction',
+          value:
+            'function onUnmounted() { console.log("onUnmounted."); stopAutoRefresh(); document.removeEventListener("visibilitychange", handleVisibilityChange) }'
+        },
+        onActivated: {
+          type: 'JSFunction',
+          value: 'function onActivated() { console.log("页面激活"); refreshData() }'
+        },
+        onDeactivated: {
+          type: 'JSFunction',
+          value: 'function onDeactivated() { console.log("页面停用"); stopAutoRefresh() }'
+        },
+        onUpdated: {
+          type: 'JSFunction',
+          value: 'function onUpdated() { console.log("页面已更新", this.state.loginCount) }'
+        },
+        onBeforeMount: {
+          type: 'JSFunction',
+          value: 'function onBeforeMount() { console.log("onBeforeMount.") }'
+        }
+      }
     }
   ],
   componentsMap: [
@@ -2097,28 +2331,28 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'CarouselItem',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyCheckboxButton',
       package: '@opentiny/vue',
       exportName: 'CheckboxButton',
       destructuring: true,
-      version: '0.1.17'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyTree',
       package: '@opentiny/vue',
       exportName: 'Tree',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyPopover',
       package: '@opentiny/vue',
       exportName: 'Popover',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyTooltip',
@@ -2132,21 +2366,21 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'Col',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyDropdownItem',
       package: '@opentiny/vue',
       exportName: 'DropdownItem',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyPager',
       package: '@opentiny/vue',
       exportName: 'Pager',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyPlusAccessdeclined',
@@ -2181,21 +2415,21 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'Search',
       destructuring: true,
-      version: '0.1.13'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyRow',
       package: '@opentiny/vue',
       exportName: 'Row',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyFormItem',
       package: '@opentiny/vue',
       exportName: 'FormItem',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyAlert',
@@ -2209,21 +2443,21 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'Input',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyTabs',
       package: '@opentiny/vue',
       exportName: 'Tabs',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyDropdownMenu',
       package: '@opentiny/vue',
       exportName: 'DropdownMenu',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyDialogBox',
@@ -2237,91 +2471,98 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'Switch',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyTimeLine',
       package: '@opentiny/vue',
       exportName: 'TimeLine',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyTabItem',
       package: '@opentiny/vue',
       exportName: 'TabItem',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyRadio',
       package: '@opentiny/vue',
       exportName: 'Radio',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyForm',
       package: '@opentiny/vue',
       exportName: 'Form',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyGrid',
       package: '@opentiny/vue',
       exportName: 'Grid',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyNumeric',
       package: '@opentiny/vue',
       exportName: 'Numeric',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyCheckboxGroup',
       package: '@opentiny/vue',
       exportName: 'CheckboxGroup',
       destructuring: true,
-      version: '0.1.17'
+      version: '3.24.0'
     },
     {
       componentName: 'TinySelect',
       package: '@opentiny/vue',
       exportName: 'Select',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyButtonGroup',
       package: '@opentiny/vue',
       exportName: 'ButtonGroup',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
+    },
+    {
+      componentName: 'TinyButton',
+      package: '@opentiny/vue',
+      exportName: 'Button',
+      destructuring: true,
+      version: '3.24.0'
     },
     {
       componentName: 'TinyCarousel',
       package: '@opentiny/vue',
       exportName: 'Carousel',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyPopeditor',
       package: '@opentiny/vue',
       exportName: 'Popeditor',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyDatePicker',
       package: '@opentiny/vue',
       exportName: 'DatePicker',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'TinyDropdown',
@@ -2335,7 +2576,7 @@ export const appSchemaDemo01 = {
       package: '@opentiny/vue',
       exportName: 'ChartHistogram',
       destructuring: true,
-      version: '0.1.16'
+      version: '3.24.0'
     },
     {
       componentName: 'PortalHome',
@@ -2366,6 +2607,13 @@ export const appSchemaDemo01 = {
       main: '',
       destructuring: false,
       version: '1.0.0'
+    },
+    {
+      componentName: 'TinyCard',
+      exportName: 'Card',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
     }
   ],
   meta: {
diff --git a/packages/vue-generator/test/testcases/lifecycle/lifecycle.test.js b/packages/vue-generator/test/testcases/lifecycle/lifecycle.test.js
new file mode 100644
index 0000000000..03ee0cb457
--- /dev/null
+++ b/packages/vue-generator/test/testcases/lifecycle/lifecycle.test.js
@@ -0,0 +1,100 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import { generateApp } from '@/generator/generateApp'
+import { lifecycleTestSchema, complexLifecycleSchema } from './mockData'
+
+describe('Lifecycle Hooks', () => {
+  test('should generate Vue 3 lifecycle hooks from JS_LIFECYCLE', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(lifecycleTestSchema)
+    const { genResult, errors } = res
+
+    // 检查是否有错误
+    expect(errors).toHaveLength(0)
+
+    // 找到生成的 Vue 页面文件
+    const vueFile = genResult.find((file) => file.fileName === 'LifecycleTestPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证包含生命周期钩子
+    expect(content).toContain('vue.onMounted(')
+    expect(content).toContain("console.log('Component mounted')")
+    expect(content).toContain('vue.onUnmounted(')
+    expect(content).toContain("console.log('Component unmounted')")
+    expect(content).toContain('vue.onUpdated(')
+    expect(content).toContain("console.log('Component updated')")
+    expect(content).toContain('vue.onBeforeMount(')
+    expect(content).toContain("console.log('Before mount')")
+
+    // 写入测试结果文件（可选，用于调试）
+    const outputDir = path.resolve(__dirname, './result/basic')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should handle complex lifecycle scenarios', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(complexLifecycleSchema)
+    const { genResult, errors } = res
+
+    expect(errors).toHaveLength(0)
+
+    const vueFile = genResult.find((file) => file.fileName === 'ComplexLifecyclePage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证复杂的生命周期逻辑
+    expect(content).toContain('vue.onMounted(')
+    expect(content).toContain('initializeData()')
+    expect(content).toContain('setupEventListeners()')
+    expect(content).toContain('vue.onBeforeUnmount(')
+    expect(content).toContain('cleanup()')
+    expect(content).toContain('removeEventListeners()')
+    expect(content).toContain('vue.onErrorCaptured(')
+    expect(content).toContain('handleError(error)')
+    expect(content).toContain('reportError(error)')
+
+    // 验证组件正确渲染
+    expect(content).toContain('<div class="complex-component">')
+
+    // 写入测试结果文件
+    const outputDir = path.resolve(__dirname, './result/complex')
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const { fileName, fileContent } of genResult) {
+      if (fileName.endsWith('.vue')) {
+        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+      }
+    }
+  })
+
+  test('should handle lifecycle in component props', async () => {
+    const instance = generateApp()
+    const res = await instance.generate(lifecycleTestSchema)
+    const { genResult, errors } = res
+
+    expect(errors).toHaveLength(0)
+
+    const vueFile = genResult.find((file) => file.fileName === 'LifecycleTestPage.vue')
+    expect(vueFile).toBeDefined()
+
+    const content = vueFile.fileContent
+
+    // 验证生命周期钩子不会作为属性绑定到组件上
+    expect(content).not.toContain('onMounted=')
+    expect(content).not.toContain(':onMounted=')
+
+    // 而是应该在script中
+    expect(content).toContain('vue.onMounted(')
+    expect(content).toContain("console.log('Component mounted')")
+  })
+})
diff --git a/packages/vue-generator/test/testcases/lifecycle/mockData.js b/packages/vue-generator/test/testcases/lifecycle/mockData.js
new file mode 100644
index 0000000000..e73c920915
--- /dev/null
+++ b/packages/vue-generator/test/testcases/lifecycle/mockData.js
@@ -0,0 +1,260 @@
+/**
+ * 生命周期钩子功能测试的模拟数据
+ */
+
+// 基础生命周期测试 Schema
+export const lifecycleTestSchema = {
+  meta: {
+    name: 'LifecycleTest',
+    description: 'Test lifecycle hooks functionality'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyButton',
+      exportName: 'Button',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'LifecycleTestPage',
+      meta: {
+        id: 'lifecycle-page',
+        isPage: true,
+        parentId: '0',
+        router: '/lifecycle-test'
+      },
+      props: {
+        class: 'lifecycle-container'
+      },
+      children: [
+        {
+          componentName: 'TinyButton',
+          props: {
+            onClick: {
+              type: 'JSExpression',
+              value: 'this.handleClick'
+            }
+          },
+          children: ['点击按钮']
+        }
+      ],
+      state: {},
+      methods: {
+        handleClick: {
+          type: 'JSFunction',
+          value: 'function handleClick() { console.log("Button clicked"); }'
+        }
+      },
+      lifeCycles: {
+        onMounted: {
+          type: 'JSFunction',
+          value: 'function onMounted() { console.log("Component mounted") }'
+        },
+        onUnmounted: {
+          type: 'JSFunction',
+          value: 'function onUnmounted() { console.log("Component unmounted") }'
+        },
+        onUpdated: {
+          type: 'JSFunction',
+          value: 'function onUpdated() { console.log("Component updated") }'
+        },
+        onBeforeMount: {
+          type: 'JSFunction',
+          value: 'function onBeforeMount() { console.log("Before mount") }'
+        }
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
+
+// 复杂生命周期测试 Schema
+export const complexLifecycleSchema = {
+  meta: {
+    name: 'ComplexLifecycleTest',
+    description: 'Test complex lifecycle scenarios'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'ComplexLifecyclePage',
+      meta: {
+        id: 'complex-lifecycle-page',
+        isPage: true,
+        parentId: '0',
+        router: '/complex-lifecycle'
+      },
+      props: {
+        class: 'complex-component'
+      },
+      children: [
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '测试输入框'
+          }
+        }
+      ],
+      state: {
+        inputValue: '',
+        isLoading: false
+      },
+      methods: {
+        initializeData: {
+          type: 'JSFunction',
+          value: 'function initializeData() { this.isLoading = true; }'
+        },
+        setupEventListeners: {
+          type: 'JSFunction',
+          value: 'function setupEventListeners() { console.log("Setting up listeners"); }'
+        },
+        cleanup: {
+          type: 'JSFunction',
+          value: 'function cleanup() { this.isLoading = false; }'
+        },
+        removeEventListeners: {
+          type: 'JSFunction',
+          value: 'function removeEventListeners() { console.log("Removing listeners"); }'
+        },
+        handleError: {
+          type: 'JSFunction',
+          value: 'function handleError(error) { console.error("Handled error:", error); }'
+        },
+        reportError: {
+          type: 'JSFunction',
+          value: 'function reportError(error) { console.log("Reporting error:", error); }'
+        }
+      },
+      lifeCycles: {
+        onMounted: {
+          type: 'JSFunction',
+          value: 'function onMounted() { initializeData(); setupEventListeners() }'
+        },
+        onBeforeUnmount: {
+          type: 'JSFunction',
+          value: 'function onBeforeUnmount() { cleanup(); removeEventListeners() }'
+        },
+        onErrorCaptured: {
+          type: 'JSFunction',
+          value: 'function onErrorCaptured() { handleError(error); reportError(error) }'
+        }
+      }
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}
+
+// 混合生命周期和其他功能的测试 Schema
+export const mixedLifecycleSchema = {
+  meta: {
+    name: 'MixedLifecycleTest',
+    description: 'Test lifecycle hooks mixed with other features'
+  },
+  componentsMap: [
+    {
+      componentName: 'TinyButton',
+      exportName: 'Button',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    },
+    {
+      componentName: 'TinyInput',
+      exportName: 'Input',
+      package: '@opentiny/vue',
+      version: '^3.10.0',
+      destructuring: true
+    }
+  ],
+  pageSchema: [
+    {
+      componentName: 'div',
+      fileName: 'MixedLifecyclePage',
+      meta: {
+        id: 'mixed-page',
+        isPage: true,
+        parentId: '0',
+        router: '/mixed-lifecycle'
+      },
+      props: {
+        class: 'mixed-container'
+      },
+      children: [
+        {
+          componentName: 'TinyInput',
+          props: {
+            placeholder: '请输入内容',
+            // 数据绑定
+            value: {
+              type: 'JSDataBinding',
+              field: 'state.inputValue'
+            },
+            // 生命周期钩子
+            onMounted: {
+              type: 'JSFunction',
+              value: 'function onMounted() { focusInput() }'
+            }
+          }
+        },
+        {
+          componentName: 'TinyButton',
+          props: {
+            // JS表达式
+            disabled: {
+              type: 'JSExpression',
+              value: 'this.inputValue.length === 0'
+            },
+            // 事件处理
+            onClick: {
+              type: 'JSExpression',
+              value: 'this.handleSubmit'
+            },
+            // 生命周期钩子
+            onBeforeMount: {
+              type: 'JSFunction',
+              value: 'function onBeforeMount() { console.log("Button preparing to mount") }'
+            }
+          },
+          children: ['提交']
+        }
+      ],
+      state: {
+        inputValue: ''
+      },
+      methods: {
+        focusInput: {
+          type: 'JSFunction',
+          value: 'function focusInput() { console.log("Focusing input"); }'
+        },
+        handleSubmit: {
+          type: 'JSFunction',
+          value: 'function handleSubmit() { console.log("Submitting:", this.inputValue); }'
+        }
+      },
+      lifeCycles: {}
+    }
+  ],
+  blockSchema: [],
+  globalState: [],
+  dataSource: { list: [] },
+  utils: []
+}