设置方法未被调用

Question

我使用（typescript、babel、linter）创建了一个入门项目vue ui。一切工作正常，但我不太明白如何使Composition 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>

欲了解更多详情，请查看此问题