docs(transfer): composition api (#1078)

* docs(transfer): Upgrade the use case of transfer component to Composition API

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

src/transfer/demos/enUS/basic.demo.md

@@ -7,6 +7,8 @@ Basic example of transfer. If you have tons of data, see next section.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -19,12 +21,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/enUS/filterable.demo.md

@@ -11,6 +11,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -23,12 +25,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/enUS/large-data.demo.md

@@ -12,6 +12,8 @@ If you have tons of data, you may need to speed the transfer up! Set `virtual-sc
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 42000 }).map((v, i) => ({
     label: 'Option' + i,
@@ -21,15 +23,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 10000 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/enUS/size.demo.md

@@ -20,8 +20,10 @@ They doesn't look harmonious.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20 }).map((v, i) => ({
+  return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -29,15 +31,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 5 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/zhCN/basic.demo.md

@@ -7,6 +7,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -19,12 +21,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/zhCN/filterable.demo.md

@@ -11,6 +11,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -23,12 +25,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/zhCN/large-data.demo.md

@@ -12,8 +12,10 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20000 }).map((v, i) => ({
+  return Array.apply(null, { length: 42000 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -21,15 +23,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 10000 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```

src/transfer/demos/zhCN/size.demo.md

@@ -20,8 +20,10 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20 }).map((v, i) => ({
+  return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -29,15 +31,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 5 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```