Vue3 组件生命周期简单应用

最新推荐文章于 2024-10-01 17:17:19 发布

javaGHui

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量53

点赞数

分类专栏： Vue相关文章标签：前端 vue

本文链接：https://blog.csdn.net/jiayou2020527/article/details/132154508

版权

Vue相关专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的组件生命周期方法，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等各个阶段的触发时机和作用。

摘要由CSDN通过智能技术生成

<template>
    <h2>Vue 组件生命周期</h2>
    <p>{{message}}</p>
    <button @click="message='123'">修改数据</button>
</template>

<script>

export default {
    data(){
        return{
            message:""
        }
    },
    beforeCreate(){
        console.log("beforeCreate:组件创建之前");
    },
    created(){
        console.log("created:组件创建完成");
    },
    beforeMount(){
        console.log("berforeMount:组件渲染之前");
    },
    mounted(){
        console.log("mounted:组件渲染完成");
    },
    beforeUpdate(){
        console.log("beforeUpdate:组件更新之前");
    },
    updated(){
        console.log("beforeUpdate:组件更新完成");
    },
    beforeUnmount(){
        console.log("beforeUnmount:组件卸载之前");
    },
    unmounted(){
        console.log("unmounted:组件卸载完成");
    }
}
</script>

<style scoped>

</style>