Vue入门 Demo6 vue生命周期

官方给的生命周期例图是这样的,那么他是在什么时候执行的呢?图中给的是8个生命周期函数,其实是有11个生命周期函数的.
为了方便理解生命周期函数的执行流程,我写了相关的小例子.

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>Vue实例生命周期函数</title> 
        <script src="./vue.js"></script>
    </head> 
    <body> 
       <div id="root">    
       </div>

       <script>
           //生命周期函数就是vue实例在某个时间点会自动执行的函数
           var vm = new Vue({
                el: "#root",
                template: "<div>{{test}}</div>",
                data: {
                    test: "hello world",
                },
                beforeCreate: function(){
                    console.log("beforeCreate");
                },
                created: function(){
                    console.log("created");
                },
                beforeMount: function(){
                    console.log("beforeMount");
                },
                mounted: function(){
                    console.log("mounted");
                },
                //注意当出现vm.$destory()函数时会执行beforeDestory和destoryed函数
                beforeDestroy: function(){
                    console.log("beforeDestroy");
                },
                destroyed: function(){
                    console.log("destroyed");
                },
                //当数据发生改变时将会执行beforeUpdate和updated函数
                beforeUpdate: function(){
                    console.log("beforeUpdate");
                },
                updated: function(){
                    console.log("updated");
                },
           })
       </script>
    </body> 
</html>

当页面执行时就会执行beforeCreate,created,beforeMount,mounted等函数
当执行vm.$destory()函数时会执行beforeDestory和destoryed函数.
当数据发生改变时将会执行beforeUpdate和updated函数.

城南花已开呀

发布了45 篇原创文章 · 获赞 2 · 访问量 5185

私信关注

Vue入门 Demo6 vue生命周期

Vue入门 Demo6 vue生命周期

猜你喜欢