Make some changes on setup, and rename it to

Author: ruojianll

docs/en/_sidebar.md

@@ -2,7 +2,6 @@
 - [Quick start](/en/quick-start/quick-start.md)
 - Class component
     - [Component](/en/class-component/component/component.md)
-    - [Setup](/en/class-component/setup/setup.md)
     - [Property](/en/class-component/property/property.md)
     - [Method](/en/class-component/method/method.md)
     - [Hooks](/en/class-component/hooks/hooks.md)
@@ -13,6 +12,7 @@
     - [Watcher](/en/class-component/watcher/watcher.md)
     - [Injection](/en/class-component/injection/injection.md)
     - [Model](/en/class-component/model/model.md)
+    - [Use](/en/class-component/use/use.md)
 - Inheritance
     - [ECMAScript class](/en/inheritance/es-class/es-class.md)
     - [Component](/en/inheritance/component/component.md)

docs/en/class-component/setup/code-option-setup.ts

@@ -0,0 +1,25 @@
+import { Component, Vue, Use } from 'vue-facing-decorator'
+import { ref } from 'vue'
+import { useRouter, Router } from 'vue-router'
+
+@Component
+class MyComponent extends Vue {
+
+    @Use(useRouter)
+    router!: Router
+
+    mounted() {
+        console.log(this.router)
+    }
+}
+
+@Component
+class MyComponent2 extends Vue {
+
+    @Use(() => ref('hello world'))
+    data!: string
+
+    mounted() {
+        console.log(this.data)
+    }
+}

docs/en/class-component/setup/code-usage-base.ts

@@ -0,0 +1,6 @@
+## Usage
+
+Use the decorator `Use` exported from `'vue-facing-decorator'` to inject [composables](https://vuejs.org/guide/reusability/composables.html) into your component's class as proeprty.
+
+[](./code-usage-base.ts ':include :type=code typescript')
+

docs/en/class-component/setup/setup.md

@@ -12,6 +12,7 @@
     - [监视器](/zh-cn/class-component/watcher/watcher.md)
     - [注入](/zh-cn/class-component/injection/injection.md)
     - [Model](/zh-cn/class-component/model/model.md)
+    - [Composition 组件](/zh-cn/class-component/use/use.md)
 - 继承
     - [ECMAScript 类 继承](/zh-cn/inheritance/es-class/es-class.md)
     - [组件 继承](/zh-cn/inheritance/component/component.md)

docs/en/class-component/use/code-usage-base.ts

@@ -0,0 +1,25 @@
+import { Component, Vue, Use } from 'vue-facing-decorator'
+import { ref } from 'vue'
+import { useRouter, Router } from 'vue-router'
+
+@Component
+class MyComponent extends Vue {
+
+    @Use(useRouter)
+    router!: Router
+
+    mounted() {
+        console.log(this.router)
+    }
+}
+
+@Component
+class MyComponent2 extends Vue {
+
+    @Use(() => ref('hello world'))
+    data!: string
+
+    mounted() {
+        console.log(this.data)
+    }
+}

docs/en/class-component/use/use.md

@@ -0,0 +1,6 @@
+## 用法
+
+使用装饰器`Use`注入[Composition 组件](https://vuejs.org/guide/reusability/composables.html)作为你的组件属性。
+
+[](./code-usage-base.ts ':include :type=code typescript')
+

docs/zh-cn/_sidebar.md

@@ -1,6 +1,6 @@
 import { defineComponent, type ComponentCustomOptions } from 'vue';
 import { obtainSlot, getSuperSlot } from './utils'
-import { build as optionSetup } from './option/setup'
+import { build as optionUse } from './option/use'
 import { build as optionComputed } from './option/computed'
 import { build as optionData } from './option/data'
 import { build as optionMethodsAndHooks } from './option/methodsAndHooks'
@@ -16,11 +16,11 @@ import type { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
 export type Cons = VueCons
 
-// export interface Cons { new(): any, prototype: any }
+export type SetupFunction = (this: void, props: Readonly<any>, ctx: SetupContext<any>) => any
 function ComponentOption(cons: Cons, extend?: any) {
-    
+
     const optionBuilder: OptionBuilder = {}
-    const setupData = optionSetup(cons, optionBuilder)
+    optionUse(cons, optionBuilder)
     optionVModel(cons, optionBuilder)
     optionComputed(cons, optionBuilder)//after VModel
     optionWatch(cons, optionBuilder)
@@ -30,14 +30,16 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionRef(cons, optionBuilder)//after Computed
     optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
+
+    const setupFunction: SetupFunction | undefined = optionBuilder.use ? function (props,ctx) {
+        return optionBuilder.use!(props,ctx)
+    } : undefined
+
     const raw = {
-        setup: optionBuilder.setup,
+        setup:setupFunction,
         data() {
             delete optionBuilder.data
             optionData(cons, optionBuilder, this)
-            if (optionBuilder.data && Object.keys(setupData).length > 0) {
-                Object.assign(optionBuilder.data, setupData)
-            }
             return optionBuilder.data ?? {}
         },
         methods: optionBuilder.methods,
@@ -53,7 +55,6 @@ function ComponentOption(cons: Cons, extend?: any) {
 
 type ComponentOption = {
     name?: string
-    setup?: (this: void, props: Readonly<any>, ctx: SetupContext<any>) => Promise<any> | any | RenderFunction | void,
     emits?: string[]
     provide?: Record<string, any> | Function
     components?: Record<string, any>