2 ms·
Have you considered that this might be an issue on your end, and not the V3 Composition API's end? 4 year Vue dev here (right after 2.0 release). In Vue 2, you
by gavinray 6y ago
Have you considered that this might be an issue on your end, and not the V3 Composition API's end?
4 year Vue dev here (right after 2.0 release). In Vue 2, you have a bunch of "magic" properties. Your state goes under the "data" key, computed properties go under "computed", methods go under... etc. Then you have the lifecycle hook magic methods: "created()", "destroyed()", etc.
In Vue 3, you have one function -- "setup()". This function returns the stuff you want to use inside of your component. This could be state/reactive data using "reactive()" or "ref()", derived data using "computed()", watchers, plain functions, whatever.
If you need to use lifecycle hooks, then you put an "onMounted(() => {})" or whatever in your "setup()".
The API was stripped down to essentially one initialization method where you set up everything you need.
Though to be fair, these days I write Vue like a weirdo and I use JSX with it.
const App = defineComponent({
setup() {
const state = reactive({ count: 0, msg: "Hello" })
const doubledCount = computed(() => state.count * 2)
const inc = () => count.value++
return () => (
<div onClick={inc}>
<p>{state.count}: {state.doubleCount}</p>
<p>{state.msg}
</div>
)
}
})