Vue的生命周期函数

GeekLiHua

发布于 2025-01-21 13:12:49

1950

文章被收录于专栏：JavaJava

简介：Vue实例从创建到销毁是有一个生命周期的，在Vue中这个生命周期分成了多个阶段。为了让程序员能够在合适的阶段做一些事情，比如对于一个商品页面，当用户看到页面时，页面的商品都已经显示出来了。这意味着在页面显示出这些商品前，必须在生命周期的某个阶段将数据从后端服务器读取过来。Vue2提供了8个生命周期钩子函数来供程序员使用：beforeCreate()，created()，beforeMount()，mouted()，beforeUpdate()，updated()，beforeDestory(), destroyed()。

学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script>
    const app = new Vue({
        el:"#app",
     
        beforeCreate(){
            console.log("beforeCreate");
        },
        created(){
            console.log("created");
        },
        beforeMount(){
            console.log("beforeMount");
        },
        mounted(){
            console.log("mounted");
        },
        beforeUpdate(){
            console.log("beforeUpdate");
        },
        updated(){
            console.log("updated");
        },
        beforeDestory(){
            console.log("beforeDestory");
        },
        destoryed(){
            console.log("destroyed");
        },
        
    });
    </script>
</html>

运行结果：