未调用设置方法
Setup method is not being called
我用 vue ui
(typescript、babel、linter)创建了一个入门项目。一切正常,但我不太明白如何使 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>
您应该从 vue-class-component
导入 setup
然后像这样使用它:
<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
我遇到了同样的问题,是扩展子组件导致的。如果扩展组件,则永远不会调用 组合 API(设置方法)。 选项 API 生命周期挂钩在两个组件中被调用。
// child.js
<script>
import { onMounted } from "vue";
export default {
name: "ChildComponent",
setup() {
console.log('Child - setup()');
onMounted(() => {
console.log('Child - mounted (composition API)');
})
},
mounted() {
console.log('Child - mounted (option API)');
}
}
</script>
// parent.js
<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";
export default {
name: "ParentComponent",
extends: ChildComponent,
setup() {
console.log('Parent - setup()');
onMounted(() => {
console.log('Parent - mounted (composition API)');
})
},
mounted() {
console.log('Parent - mounted (option API)');
}
}
</script>
输出
Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)
我用 vue ui
(typescript、babel、linter)创建了一个入门项目。一切正常,但我不太明白如何使 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>
您应该从 vue-class-component
导入 setup
然后像这样使用它:
<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
我遇到了同样的问题,是扩展子组件导致的。如果扩展组件,则永远不会调用 组合 API(设置方法)。 选项 API 生命周期挂钩在两个组件中被调用。
// child.js
<script>
import { onMounted } from "vue";
export default {
name: "ChildComponent",
setup() {
console.log('Child - setup()');
onMounted(() => {
console.log('Child - mounted (composition API)');
})
},
mounted() {
console.log('Child - mounted (option API)');
}
}
</script>
// parent.js
<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";
export default {
name: "ParentComponent",
extends: ChildComponent,
setup() {
console.log('Parent - setup()');
onMounted(() => {
console.log('Parent - mounted (composition API)');
})
},
mounted() {
console.log('Parent - mounted (option API)');
}
}
</script>
输出
Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)