facing-dev / vue-facing-decorator

Vue typescript class component decorators
MIT License
355 stars 32 forks source link

lifecycle hooks will call twice when child component extend parent component #132

Open buke opened 2 hours ago

buke commented 2 hours ago

Question

lifecycle hooks will call twice when child component extend parent component , such as we have two vue components:

Parent.vue

<script lang="ts">
import { Component, Vue, toNative } from 'vue-facing-decorator'

@Component
export class Parent extends Vue {
    title = 'Test'
    mounted() {
        console.log('Parent mounted')
    }
}

export default toNative(Parent)
</script>

Child.Vue

<script lang="ts">
import { Component, toNative } from 'vue-facing-decorator'
import { Parent } from '. /Parent.vue'
@Component
export class Child extends Parent {
    title = 'Test'
    mounted() {
        console.log('Child mounted')
    }
}

export default toNative(Child)
</script>

when the Child load , will output:

Parent mounted
Child mounted

Expected

The expected behavior is just child output, like the normal ts class extend behavior

Child mounted