a

Author: ruojianll

docs/en/class-component/reference/code-usage.ts

@@ -7,14 +7,6 @@ import { Ref, Component, Vue } from 'vue-facing-decorator'
     <div ref="refEl"></div>
 </template>
 
-Vue options API
-{
-    computed:{
-        refEl(){
-            return this.refs['refEl']
-        }
-    }
-}
 */
 
 @Component

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

@@ -1,5 +1,5 @@
 ## Usage
 
-Use `Ref` decorator to define a reference to `this.$refs['foo']` in vue's `computed`. The reference name is the name of property.
+Use `Ref` decorator to define a property getter  `this.$refs[name]` on vue component instance. The reference name is the name of property.
 
 [](./code-usage.ts ':include :type=code typescript')

docs/zh-cn/class-component/reference/code-usage.ts

@@ -7,14 +7,6 @@ import { Ref, Component, Vue } from 'vue-facing-decorator'
     <div ref="refEl"></div>
 </template>
 
-Vue options API
-{
-    computed:{
-        refEl(){
-            return this.refs['refEl']
-        }
-    }
-}
 */
 
 @Component

docs/zh-cn/class-component/reference/reference.md

@@ -1,5 +1,5 @@
 ## 用法
 
-使用装饰器`Ref`在vue `computed`中定义一个引用`this.$refs['foo']`。引用名是这个属性的名字。
+装饰器`Ref`在vue实力上定义一个指定引用`this.$refs[name]`的访问器。引用名是这个属性的名字。
 
 [](./code-usage.ts ':include :type=code typescript')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "keywords": [

src/component.ts

@@ -25,13 +25,14 @@ export interface Cons { new(): any, prototype: any }
 function ComponentOption(cons: Cons, extend?: any) {
     const optionBuilder: OptionBuilder = {}
     optionVModel(cons,optionBuilder)
-    optionComputed(cons, optionBuilder)
+    optionComputed(cons, optionBuilder)//after VModel
     optionWatch(cons, optionBuilder)
     optionProps(cons, optionBuilder)
     optionInject(cons, optionBuilder)
     optionEmit(cons, optionBuilder)
-    optionMethodsAndLifecycle(cons, optionBuilder)
-    optionRef(cons, optionBuilder)
+    optionRef(cons, optionBuilder)//after Computed
+    optionMethodsAndLifecycle(cons, optionBuilder)//after Ref
+    
 
     const raw = {
         data() {

src/option/ref.ts

@@ -9,14 +9,23 @@ export const decorator = optoinNullableMemberDecorator(function (proto: any, nam
 
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
-    optionBuilder.computed ??= {}
     const slot = obtainSlot(cons.prototype)
     const names = slot.obtainMap<Map<string, any>>('ref')!
     if (names) {
-        names.forEach((value, name) => {
-            optionBuilder.computed![name] = function (this: any) {
-                return this.$refs[name]
-            }
+        optionBuilder.beforeCreateCallbacks??=[]
+        optionBuilder.beforeCreateCallbacks.push(function(this:any){
+
+            names.forEach((value, name) => {
+
+                Object.defineProperty(this,name,{
+                    get(this:any){
+                        console.log('vvv',name)
+                        return this.$refs[name]
+                    }
+                })
+            
+            })
         })
+
     }
 }

test/component.ts

@@ -58,7 +58,10 @@ describe('Component',
       Object.keys(EmptyContext).forEach(key => {
         if (key === 'data' && typeof EmptyContext[key] === 'function') {
           expect(true).to.equal(isEmptyObject(EmptyContext[key]()))
+        }else if(key === 'beforeCreate' && typeof EmptyContext[key] === 'function'){
+          expect(true).to.equal(isEmptyObject(EmptyContext[key]()))
         } else {
+
           expect(true).to.equal(isEmptyObject(EmptyContext[key]))
         }
       })

test/option/ref.ts

@@ -14,12 +14,12 @@ const CompContext = Comp as any
 describe('decorator Ref',
     () => {
         it('default', () => {
-            expect('function').to.equal(typeof CompContext?.computed?.refName)
-            expect('refValue').to.equal(CompContext.computed.refName.apply({
-                $refs: {
-                    refName: 'refValue'
-                }
-            }))
+            expect('function').to.equal(typeof CompContext?.beforeCreate)
+            // expect('refValue').to.equal(CompContext.computed.refName.apply({
+            //     $refs: {
+            //         refName: 'refValue'
+            //     }
+            // }))
         })
     }
 )