vue 周期函数

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

先简单说说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函数？

只有事先设置好的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>

以上是 vue 周期函数 的全部内容， 来源链接： utcz.com/z/380677.html

回到顶部