Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

1. 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"
  }
}

2. Create a SFC class component and include it into your app. Add methods mounted(), exportieren() and defaultWert():

<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