0
点赞
收藏
分享

微信扫一扫

vue的生命周期,在这个周期中,可以进行的操作

慎壹 2022-03-25 阅读 23
 <script>
        Vue.component('userdata',{
            //数据挂载到页面的四个阶段
            beforeCreate(){
                //我可以往实例this上加一些属性,但是不能调用
                console.log('userdata组件,是 beforeCreate')
                //初始化this
                //但是没有data 没有method 没有watch computed  
            },
            created(){
            //这个阶段可以,数据处理,都是待会元素渲染需要的数据
                console.log('userdata组件,是created')
                //实例完成了创建 可以访问this
                // 同时可以访问 data,method,watch,cpmputed
                // this.$el 没有
                // 向后端发送请求
            },
            beforeMount(){
                console.log('userdata组件,是 beforeMount')
                // 咱们初始化实例的时候,有el字段,或是有template 才会进入这个生命周期
                // 开始解析template 或是解析挂载的元素节点
            },
            mounted(){
                console.log('userdata组件,是 mounted')
                // 组件挂载到了DOM上,可以显示网页了
                // 此时可以访问this.$el,this.$refs
                // 获取元素位置,尺寸等参数的时候,就是这个阶段
            },
            // 数据更新的两个阶段
            beforeUpdate(){
                console.log('userdata组件,是 beforeUpdate')
                //数据更新之前
            },
            updated(){
                console.log('userdata组件,是updated')
                //数据完成更新
            },
            //数据销毁的两个阶段
            beforeDestroy(){
                console.log('userdata组件,是beforeDestroy')
                //当组件被销毁前,数据没有啥特别的变化,定时器干掉,全局事件干掉
            },
            destroyed(){
                console.log('userdata组件,是 destroy')
                //销毁实例,所有事件监听器销毁,子组件也会销毁
            }
    </script>
举报

相关推荐

0 条评论