vue对象生命周期钩子函数

1.每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            background-color: tan;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">

        <h1>{{username}}</h1>
    </div>



</body>
<script>

        var card = new Vue({
            el:"#app",
            data:{
                username:'chao'

            },
            methods:{

            },

            // vue还未获取到视图和数据属性之前触发的
            beforeCreate(){
                console.log('beforeCreate>>>>>>')
                console.log(this.$el);
                console.log(this.$data);
            },
            // vue对象获取到了数据属性,但是还没有获得圈地(视图)时触发的
            created(){
                console.log('created>>>>>>')
                console.log(this.$el);
                console.log(this.$data);
            },

            // 拿到了视图,但是数据属性挂载到视图之前触发的.
            beforeMount(){
                console.log('beforeMount>>>>>>')
                console.log(this.$el);
                console.log(this.$data);
            },

            // 数据属性挂载到视图之后触发的.
            mounted(){
                console.log('mounted>>>>>>')
                console.log(this.$el);
                console.log(this.$data);
            },
            // 重点记住created和mounted,将来我们在这两个方法中来发送获取数据的请求


        });


    </script>
</html>

 总结:

在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

posted @ 2021-04-12 14:31  urls  阅读(74)  评论(0)  编辑  收藏  举报