vue的生命周期

  1. beforecreate

beforecreate : 举个栗子:可以在这加个loading事件

  1. created

created :在这结束loading,还做一些初始化,实现函数自执行 (data数据已经初始化 但是 dom结构渲染完成
组件没有加载)

  1. mounted

mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情(dom渲染完成 组件挂载完成 )

  1. beforeDestroy

beforeDestroy: 你确认删除XX吗?(简单来说 就是组件还存在)

  1. destroyed

destroyed :当前组件已被删除,清空相关内容 (组件已经销毁 )







methods和mounted的区别
. methods

methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。

mounted

mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情(dom渲染完成 组件挂载完成 )

<script>
    export default{
        props: ['active', 'comPutedPrice'],
        data(){
            return {
                filterIndex: 0,
                zhifuRadio: '1', // 支付方式 1支付宝 2微信
                xieyiRadio: '1',
                isShowMa: false,
                isShowMa2:false
            }
        },
        mounted(){
            // 3s以后去支付结果页
            /*setTimeout(() => {
                this.createMa()
            }, 3000)*/
        },
        methods: {
            // 选择支付方式
            filterList(index){
                this.filterIndex = index
            },
            // 显示二维码界面
            goResult(){
                this.isShowMa = true
            },
            // 二维码操作 去支付结果页
            createMa(){
                // 同步更新父组件active状态
                this.$emit('update:active', this.active + 1)
                console.log(this.active);
                // 子组件给父组件发射 支付方式状态
                //this.$emit('zhifuRadio',this.zhifuRadio)
                // v-if子组件的时候 要加nextTick 单一事件管理组件通信
                this.$nextTick(() => {
                    console.log(bus);
                    bus.$emit('zhang', 0) //1 支付成功 0支付失败
                })
            }
        }
    }
</script>
Logo

前往低代码交流专区

更多推荐