Vue实例的生命周期钩子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</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'); //此时hello world并没有渲染在页面上
            },
            mounted:function () {
                console.log(this.$el);
                console.log("mounted");   //此时hello worlf已经渲染在页面上了
            },
            beforeDestory:function () {
                console.log("beforeDestory")  //实例没有销毁之前
            },
            destoryed:function () {
                console.log("destoryed")      //实例已经被销毁
            },
            beforeUpdate:function () {
                console.log("beforeUpdate")     //数据更新渲染前
            },
            updated:function () {
                console.log("updated")       //数据更新渲染后
            }
        })
    </script>
</body>
</html>

<!--
在vue中一共有十一个生命周期函数  这里只列举了8个  后三个 会在项目中体现 
-->

 

posted @ 2018-11-14 10:21  alexbiu  阅读(225)  评论(0)    收藏  举报