As a rookie, the first time to write something, a little nervous, just write, what mistakes, please correct in time!

Study background

Recently, the leader pointed out that vue3. X should be used for the next project. I have been hearing that vuE3.Copy the code

The following features are limited to the Composition Api:

First, life cycle comparison

2. X life cycle

    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed
Copy the code

3. X life cycle

The beforeCreate and Created life cycles are missing. OnBeforeUnmount replaces beforeDestroy and onUnmounted replaces destroyed

    onBeforeMount
    onMounted
    onBeforeUpdate
    onUpdated
    onBeforeUnmount
    onUnmounted
Copy the code

Setup functions

Setup is a new vue3 function that is the entry point to the Composition Api, where all lifecycle functions, including page parameters and methods, are written. It is then exposed outward through return. As follows:

export default {
    name: 'Test'.components: {},setup() {
        // Store data, often used for complex data types
        const state = reactive({
            count: 0.num: 0,})// Define some methods
        const getData = () = > {
            console.log('initialize')}The direct call method is similar to the beforeCreate Created lifecycle function call in vue 2.x
        getData()
        // Store data, usually for simple data types
        const num = ref(0)
        // page click event function
        const addCount = () = > {
            state.count++
        }
        // Lifecycle functions
        onMounted(() = > {
            console.log('complete')})/ / to monitor
        watch(() = > state.count, (newVal) = > {
            console.log(`count + num = ${newVal}`)})// All data are exposed to the outside
        return {
            ...toRefs(state),
            state,
            num,
            shiwo,
            addCount,
            addNum
        }
    }
}
Copy the code

A little rough, today first so, tomorrow continue, come on!