Vue实例的生命周期钩子

最新推荐文章于 2025-02-21 11:00:00 发布

罗彬桦

最新推荐文章于 2025-02-21 11:00:00 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45647118/article/details/113830255

Vue 专栏收录该内容

56 篇文章

订阅专栏

Vue实例的生命周期钩子

vue的生命周期共有11个。
beforeCreate——在实例初始化之后，数据观测（data observer）和 event/watcher 事件匹配之前被调用。
created——1、在实例创建完成后被立即调用。2、在这一步，实例已经完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。3、然而，挂载阶段还没开始，$ el 属性目前不可见。
beforeMount——在挂载开始之前被调用：相关的渲染函数首次被调用
mounted——el 被新创建的 vm.$el 替换，挂在成功
beforeUpdate——数据更新时调用
update——组件 DOM 已经更新，组件更新完毕

<!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>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
    
    <div id="app"></div>

    <script>
        // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
        var vm = new Vue({
            el: "#app",
            template: "<div>{{test}}</div>",
            data: {
                test: "hello world"
            },
            beforeCreate: function() {
                console.log("beforeCreate");
            },
            created: function() {
                console.log("created");
            },
            beforeMount: function() {
                console.log(this.$el);
                console.log("beforeMount");
            },
            mounted: function() {
                console.log(this.$el);
                console.log("mounted");
            },
            beforeDestroy: function() {
                console.log("beforeDestroy");
            },
            destroyed: function() {
                console.log("destroyed");
            },
            beforeUpdate: function() {
                console.log("beforeUpdate");
            },
            updated: function() {
                console.log("updated");
            }


        }) 
       
    </script>
</body>
</html>