vue
vue copied to clipboard
[2.7.14][class component][sfc][vite] Method names containing "export" and "default" break lifecycle hooks
Version
2.7.14
Reproduction link
Steps to reproduce
- Create a typescript/vite/vue 2 app with these dependencies
{
"dependencies": {
"vue": "^2.7.14",
"vue-class-component": "^7.2.6"
},
"devDependencies": {
"@types/node": "^16.11.45",
"@vitejs/plugin-legacy": "^2.0.0",
"@vitejs/plugin-vue2": "^1.1.2",
"@vue/tsconfig": "^0.1.3",
"npm-run-all": "^4.1.5",
"terser": "^5.14.2",
"typescript": "~4.7.4",
"vite": "^3.0.2",
"vue-tsc": "^0.38.8"
}
}
- Create a SFC class component and include it into your app. Add methods
mounted()
,exportieren()
anddefaultWert()
:
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({})
export default class HelloWorld extends Vue {
test = "";
mounted() {
console.log("mounted!");
this.test = "Hallo Welt!";
}
exportieren(): void {
// do nothing
}
defaultWert(): void {
// do nothing
}
}
</script>
<template>
<p>{{ test }}</p>
</template>
What is expected?
exportieren()
and defaultWert()
should not prevent lifecycle hooks from being called.
What is actually happening?
Lifecycle hook mounted()
is not called. Renaming/rearranging/removing either exportieren()
or defaultWert()
fixes the issue.
I'm guessing it's a problem with the sfc-compiler, as I can't reproduce this bug with a plain js/ts component:
import Vue from "vue";
import Component from "vue-class-component";
@Component({
template: "<p>{{ test }}</p>"
})
export default class HelloWorld extends Vue {
test = "";
mounted() {
console.log("mounted!");
this.test = "Hallo Welt!";
}
exportieren(): void {
// do nothing
}
defaultWert(): void {
// do nothing
}
}
I'm just spitballing but it might be a problem with https://github.com/vuejs/vue/blob/main/packages/compiler-sfc/src/rewriteDefault.ts#L5. I pasted the regex into regexr: https://regexr.com/73ktb