Vue的生命周期函数

极客李华

已于 2022-10-11 21:22:12 修改

阅读量373

点赞数 1

分类专栏： Vue的学习之旅文章标签： vue.js javascript 前端

于 2022-10-11 21:21:57 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127271915

版权

Vue的学习之旅专栏收录该内容

30 篇文章 2 订阅

订阅专栏

简介：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>

运行结果：
在这里插入图片描述

极客李华

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue的生命周期函数

Vue实例从创建到销毁是有一个生命周期的，在Vue中这个生命周期分成了多个阶段。阶段将数据从后端服务器读取过来。为了让程序员能够在合适的阶段做一些事情，比如对于一个商品页面，当用户看到页面时，页面的商品都已经显示出来了。这意味着在页面显示出这些商品前，必须在生命周期的某个。
复制链接

扫一扫