《Vue.js入门》之vue生命周期

夜石

于 2020-06-26 21:08:43 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue js

本文链接：https://blog.youkuaiyun.com/Abit_Go/article/details/106974642

前端专栏收录该内容

2 篇文章

订阅专栏

本文深入解析Vue的生命周期钩子，如create和mounted等，通过实例演示它们的调用时机及应用场景，帮助开发者理解Vue组件的生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的生命周期钩子与jQuery类似。

create实例创建完成之后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。

mounted el挂载到实例上后调用，一般开始第一个业务逻辑。

beforedDestory实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <div id="app">
        print
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                a:999
            },

            create: function(){
                console.log(this.a);//9999
            },
            mounted:function(){
                console.log(this.$el);
            }
        })
    </script>
</body>
</html>

在销毁之前调用，主要解绑一些使用事件监听等。