VUE3之Composition API(三)

生命周期钩子

在setup中使用生命周期函数,直接导入vue中的onX函数注册生命周期:

<script>
import {onMounted, onUpdated,onUnmounted,ref} from 'vue';
    export default {
        setup(props) {
            const counter =ref(0);
            const increment=()=>{
                counter.value++;
            };
            onMounted(() => {
                console.log("app mounted");
            });
            onUpdated(() => {
                console.log("app updated");
            });
            onUnmounted(() => {
                console.log("app unmounted");
            });
            return {
                counter,
                increment
            }
        }
    }
</script>

一个生命周期函数可以使用多次。

发表评论