a

Author: ruojianll

docs/en/_sidebar.md

@@ -6,7 +6,7 @@
     - [Method](/en/class-component/method/method.md)
     - [Lifecycle hooks](/en/class-component/lifecycle-hook/lifecycle-hook.md)
     - [Component property](/en/class-component/component-property/component-property.md)
-    - [Getter](/en/class-component/getter/getter.md)
+    - [Accessor](/en/class-component/accessor/accessor.md)
     - [Event](/en/class-component/event/event.md)
     - [Reference](/en/class-component/reference/reference.md)
     - [Watcher](/en/class-component/watcher/watcher.md)

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

@@ -0,0 +1,23 @@
+## Usage
+
+Property getters will be tranformed into `{computed:{get:Foo}}`.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Writable
+
+Property setters will be tranformed into `{computed:{set:Foo}}`.
+
+[](./code-writable.ts ':include :type=code typescript')
+
+## Vanilla getter
+
+We can define a ES vanilla getter by `@Vanilla`.
+
+[](./code-vanilla-getter.ts ':include :type=code typescript')
+
+## Vanilla setter
+
+We can define a ES vanilla setter by `@Vanilla`.
+
+[](./code-vanilla-setter.ts ':include :type=code typescript')

docs/en/class-component/getter/code-usage.ts renamed to docs/en/class-component/accessor/code-usage.ts

@@ -5,7 +5,7 @@ import { Component, Vue } from 'vue-facing-decorator'
 Vue options API
 {
     computed:{
-        getter(){
+        get(){
             return 'value'
         }
     }

docs/en/class-component/accessor/code-vanilla-getter.ts

@@ -0,0 +1,10 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    @Vanilla
+    get getter() {
+        return 'value'
+    }
+}

docs/en/class-component/accessor/code-vanilla-setter.ts

@@ -0,0 +1,11 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    @Vanilla
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

docs/en/class-component/accessor/code-writable.ts

@@ -0,0 +1,21 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    computed:{
+        set(){
+            return 'value'
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

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

@@ -6,7 +6,7 @@
     - [方法](/zh-cn/class-component/method/method.md)
     - [生命周期钩子](/zh-cn/class-component/lifecycle-hook/lifecycle-hook.md)
     - [组件属性](/zh-cn/class-component/component-property/component-property.md)
-    - [访问器](/zh-cn/class-component/getter/getter.md)
+    - [存取器](/zh-cn/class-component/accessor/accessor.md)
     - [事件](/zh-cn/class-component/event/event.md)
     - [引用](/zh-cn/class-component/reference/reference.md)
     - [监视器](/zh-cn/class-component/watcher/watcher.md)

docs/zh-cn/_sidebar.md

@@ -0,0 +1,23 @@
+## 用法
+
+类中的访问器会被转换到vue `{computed:{get:Foo}}`中。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## 可写的
+
+类中的设置器会被转换到vue `{computed:{set:Foo}}`中。
+
+[](./code-writable.ts ':include :type=code typescript')
+
+## 原生访问器
+
+使用`@Vanilla`定义ES原生访问器。
+
+[](./code-vanilla-getter.ts ':include :type=code typescript')
+
+## 原生设置器
+
+使用`@Vanilla`定义原生设置器。
+
+[](./code-vanilla-setter.ts ':include :type=code typescript')

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

@@ -5,7 +5,7 @@ import { Component, Vue } from 'vue-facing-decorator'
 Vue options API
 {
     computed:{
-        getter(){
+        get(){
             return 'value'
         }
     }