vue 生命周期

生命周期

从创建vue实例到销毁的过程

u=1325364168,1860926865&fm=173&app=25&f=JPEG.jpg

        <div id="app">
            <p>{{msg}}</p>
            <button @click="isRender">点我</button>
            <keep-alive>
                <component :is="arr[isRend==true?0:1]"></component>
            </keep-alive>
            <test v-if="isRend"></test>
        </div>

            var test1 = {
                template:`<div>我是一个局部组件1</div>`
            }
            
            var test = {
                template:"<div>我是一个局部组件</div>",
                created(){
                    console.log('test初始化了组件的数据');
                },
                //使用v-if销毁元素就会触发
                
                beforeDestroy(){
                    console.log("组件开始销毁");
                },
                destroyed(){
                    console.log("组件销毁完成");
                },
                activated(){
                    console.log(222,"我包裹在了keep-alive标签中");
                },
                deactivated(){
                    console.log(111,'隐藏包裹在keep-alive标签中组件的时候被触发');
                }
            }
            
            var vm = new Vue({
                el:"#app",
                components:{
                    test,//test:test的简写
                    test1
                },
                data:{
                    msg:"hello",
                    isRend:true,
                    arr:[test,test1]
                },
                methods:{
                    isRender(){
                        this.isRend=!this.isRend;
                    }
                },
                //8个生命周期
                beforeCreate(){
                    console.log("初始化了生命周期");
                    //$data表示调用vue自己的属性,防止跟用户自定义的data属性冲突
                    console.log(this.$data);//undefined
                },
                created(){
                    console.log('初始化了活动对象');
                    console.log(this.$data);//{__ob__: Observer}
                    
                    console.log('在这个钩子函数里面通过ajax请求');
                },
                beforeMount(){
                    console.log('进入渲染函数,但还没有渲染');
                    //$el:就是vue的渲染模板
                    console.log(this.$el.innerHTML);
                    
                },
                mounted(){
                    console.log("模板渲染完成");
                    console.log(this.$el.innerHTML);    
                    //在mounted添加点击事件,添加到在这之前无效
                    document.querySelector('p').addEventListener("click",function(){
                        alert('点我干嘛');
                    })
                    console.log('可以在此进行dom操作');
                },
                beforeUpdate(){
                    console.log('数据发生了变化,但还没完成');
                    console.log(this.$el.innerHTML)//hello 变化前
                },
                updated(){
                    console.log('数据发生变化了,并且已经完成');
                    console.log(this.$el.innerHTML)//haha 变化后
                },
                beforeDestroy(){
                    console.log('vue实例销毁前触发');
                },
                destroyed(){
                    console.log("vue实例已经销毁了");
                }
            });
            
            //2s后改变数据,触发beforeUpdate和updated
            setTimeout(()=>{
                vm.msg="haha";
            },2000)