【翠花学Vue】每日打卡——vue打卡4

vue的生命周期

vue的生命周期一共有四组：

创建前（beforeCreate），创建完成时(created) ----->挂载前（beforeMOunt）,挂载完成时（mounted）-------->修改前（beforeUpdate），修改完成时（updated）-------->销毁前（beforeDestroy），销毁完成时（destroyed）。

通过以下代码可以查看不同状态时的内容。

beforeCreate和created 这一组生命周期，中间包含data中的属性值注入以及一些反应。

beforeMount和mounted 这一组生命周期，中间包含指定el对应的模板完成渲染。

beforeUpdate和updated 这一组生命周期，在data中的属性发生改变，会将页面重新完成渲染。

  <div id="app">
        {{msg}}
        <button @click="modify">点击修改</button>
    </div>
   
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:"张三"
                } 
            },
            methods:{
                modify(){
                    this.msg="李四"
                }
            },
            //1.beforeCreate  created
            beforeCreate(){
                console.log("beforeCreate-----"+this.msg)
            },
            created(){
                console.log("created----"+this.msg)
            },
            //2.beforeMount mounted
            beforeMount(){
                console.log("beforeMount---"+document.getElementById("app").innerHTML)
            },
            mounted(){
                console.log("mounted----"+document.getElementById("app").innerHTML)
            },
            //3.beforeUpdate  updated
            beforeUpdate(){
                console.log("beforeUpdate------"+document.getElementById("app").innerHTML)
            },
            updated(){
                console.log("updated----"+document.getElementById("app").innerHTML)
            }
        })
    </script>

销毁生命周期可以通过组件的行为事件来触发。

 <div id="app">
        <taobao v-if="flag==1"></taobao>
        <button @click="hideComp">点击隐藏</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var taobao={
            template:`
                <div>淘宝</div>
            `,
            beforeDestroy(){
                console.log("beforeDestroy")
            },
            destroyed(){
                console.log("destoryed")
            }
        }
        new Vue({
            el:"#app",
            components:{
                "taobao":taobao
            },
            data(){
                return{
                    flag:1
                }
                
            },
            methods:{
                hideComp(){
                    this.flag=2;
                }
            }
        })
    </script>

 

 如果此时我修改刚刚的代码，添加一个显示的方法，那么每次我隐藏时就会销毁组件，我显示时又会重新创建组件。反复的重建对性能来说一定会造成很大的影响。

  <div id="app">
        <taobao v-if="flag==1"></taobao>
        <button @click="hideComp">点击隐藏</button>
        <button @click="showComp">点击显示</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var taobao={
            template:`
                <div>淘宝</div>
            `,
            beforeCreate(){
                console.log("创建前");
            },
            created(){
                console.log("创建完成时")
            },
            beforeDestroy(){
                console.log("beforeDestroy")
            },
            destroyed(){
                console.log("destoryed")
            }
        }
        new Vue({
            el:"#app",
            components:{
                "taobao":taobao
            },
            data(){
                return{
                    flag:1
                }
                
            },
            methods:{
                showComp(){
                    this.flag=1;
                },
                hideComp(){
                    this.flag=2;
                }
            }
        })
    </script>

那么要想解决这种问题，可以使用<keep-alive></keep-alive>标签。

 actived和deactived:激活和停用，对于组件来说，通过v-if使用完成组件的隐藏和显示。

通过<keep-alive></keep-alive>将组件包裹，则会触发 actived和deactived,提升组件的性能。

 <div id="app">
        <keep-alive>
        <taobao v-if="flag==1"></taobao>
        </keep-alive>
        <button @click="hideComp">点击隐藏</button>
        <button @click="showComp">点击显示</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var taobao={
            template:`
                <div>淘宝</div>
            `,
            beforeCreate(){
                console.log("beforeCreate------")
            },
            created(){
                console.log("created------")
            },
            activated(){
                console.log("激活")
            },
            deactivated(){
                console.log("停用")
            }
        }
        new Vue({
            el:"#app",
            components:{
                "taobao":taobao
            },
            data(){
                return{
                    flag:1
                }
                
            },
            methods:{
                hideComp(){
                    this.flag=2;
                },
                showComp(){
                    this.flag=1;
                }
            }
        })
    </script>