vue 周期函数

Posted 2021-01-28 wanan-01

先简单说说vue中周期函数

• beforeCreate（创建前）
• created（创建后）
• beforeMount（载入前）
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

<template>
    <div>
        <p>{{msg}}</p>
        <p @click="updateData">修改数据</p>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                msg:‘城市列表‘
            }
        },
        beforeCreate(){
            console.log("创建前");
            console.log(this.msg); //undefined
        },
        created(){
            console.log("创建后"+this);
            console.log(this.msg); //城市列表
        },
        beforeMount(){
            console.log("挂载到dom前");
        },
        mounted(){
            console.log("挂载到dom前");
            this.get_info();
        },
        activated(){
            console.log("keep-alive组件激活时调用。");
//            this.get_info()
        },
        deactivated(){
            console.log("keep-alive组件停用时调用。");
        },
        beforeUpdate(){
            console.log("数据更新前");
        },
        updated(){
            console.log("数据更新后");
            console.log("data重新渲染了");
        },
        beforeDestroy(){
            console.log("销毁前");
        },
        destroyed(){
            console.log("销毁后");
        },
        methods:{
            get_info(){
                this.axios.get(‘index.php?g=api&m=api&a=index_class_video_api‘,{
                    params: {
                        is_web:1
                    }
                }).then((res)=>{
                    if(res.data.status == 1){
                           console.log("成功")
                    }else{
                        console.log("处理数据失败")
                    }
                }).catch((error)=>{
                     console.log(error);
                })
            },
            updateData(){
                this.msg="我是修改以后的"
            }
        }
    }
</script>

<style>
</style>

主要说一下updated

一：什么时候触发updated函数？

只有事先设置好的data变量如msg改变并且要在页面重新渲染{{ msg}}完成之后,才会进updated方法，光改变msg但不渲染页面是不会触发的.

<template>
    <div>
        <p>{{msg}}</p>
        <p @click="updateData">修改数据</p>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                msg:‘城市列表‘
            }
        },
        updated(){
            console.log("data重新渲染了")
        },
        methods:{
            updateData(){
                this.msg="我是修改以后的"
            }
        }
    }
</script>