vue05-生命周期

首先看下面代码：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">hello world</div>
        
        <script>
            //生命周期函数就是vue实例在某一个时间点会自动执行的函数
            var vm = new Vue({
                el:"#app",
                template:"<div>{{test}}</div>",
                data:{
                    test:'test hello'
                },
                beforeCreate: function(){
                    console.log("before create"); //vue实例初始化后执行
                },
                created: function(){
                    console.log("created"); //外部注入，双向绑定等完成后执行
                },
                beforeMount: function(){
                    console.log("before mount");
                    console.log(this.$el);  //页面还没有被渲染
                },
                mounted: function(){
                    console.log("mounted");
                    console.log(this.$el); //页面渲染完
                },
                beforeDestroy: function(){ //当vm.$destory()方法执行时
                    console.log("beforeDestory");
                },
                destroyed: function(){
                    console.log("destoryed");//组件被完全销毁后
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate");
                },
                updated: function(){
                    console.log("updated");
                }

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

声明周期就是vue实例在某一个时间点会自动执行的函数，这些函数没有放在methods里面，直接在vue实例下。

beforeCreate： vue实例初始化后执行

created：外部注入，双向绑定等完成后执行

beforeMount：页面还没有被渲染

mounted：页面渲染完

beforeDestroy：当vm.$destory()方法执行时

destroyed：组件被完全销毁后

beforeUpdate：属性值有变化时

updated：属性值变化后

猜你喜欢