typescript - 未调用设置方法

Question

我用 vue ui 创建了一个启动项目( typescript ，巴别塔，短绒绒)。一切正常，但我不太明白如何制作 组合API 的 setup工作的方法。它根本没有被调用(日志输出为空)这就是我被卡住的地方。

Vue : 3.0.0-rc.10

vue-cli : 4.5.4

<script lang="ts">
 import { Options, Vue } from 'vue-class-component'
 import HelloWorld from './components/HelloWorld.vue'

 @Options({
   components: {
     HelloWorld
   },
   setup () {
     console.log('SETUP HERE')
   }
 })
 export default class App extends Vue {
   setup () {
     console.log('SETUP THERE')
   }
 }
 </script>

Answer 1

您应该导入 setup来自 vue-class-component然后像这样使用它:

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

更多详情请查看 issue