Merge pull request #300 from vuejs/fix/support-computed-properties-class-component

Support computed properties class component

Author: lmiller1990

e2e/__projects__/basic/components/ClassComponent.vue

@@ -1,13 +1,27 @@
-
 <template>
-  <div>{{ msg }}</div>
+  <div>
+    <h1 data-computed>{{ computedMsg }}</h1>
+    <h2 data-props>{{ msg }}</h2>
+    <h3 data-methods>{{ dataText }}</h3>
+    <button @click="changeMessage" />
+  </div>
 </template>
 
 <script lang="ts">
-import { Vue, Options } from 'vue-class-component'
-
+import { Options, Vue } from 'vue-class-component'
 @Options({
-  props: ['msg'] 
+  props: {
+    msg: String
+  }
 })
-export default class ClassComponent extends Vue {}
+export default class ClassComponent extends Vue {
+  dataText: string = ''
+  get computedMsg(): string {
+    return `Message: ${(this.$props as any).msg}`
+  }
+
+  changeMessage(): void {
+    this.dataText = 'Updated'
+  }
+}
 </script>

e2e/__projects__/basic/test.js

@@ -1,4 +1,4 @@
-import { createApp, h } from 'vue'
+import { createApp, h, nextTick } from 'vue'
 import { resolve } from 'path'
 import { readFileSync } from 'fs'
 
@@ -118,8 +118,19 @@ test('supports relative paths when extending templates from .pug files', () => {
 })
 
 test('supports class component .vue files', () => {
-  mount(ClassComponent, { msg: 'Hello' })
-  expect(document.querySelector('div').textContent).toBe('Hello')
+  expect.assertions(3)
+  mount(ClassComponent, { msg: 'Props Message' })
+  expect(document.querySelector('[data-computed]').textContent).toBe(
+    'Message: Props Message'
+  )
+  expect(document.querySelector('[data-props]').textContent).toBe(
+    'Props Message'
+  )
+  const event = new window.Event('click')
+  document.querySelector('button').dispatchEvent(event)
+  nextTick().then(() => {
+    expect(document.querySelector('[data-methods]').textContent).toBe('Updated')
+  })
 })
 
 // TODO: How do functional components work in Vue 3?

lib/generate-code.js

@@ -32,7 +32,11 @@ module.exports = function generateCode(
     tempOutput.match(/\}\(.*.?Vue\);/) &&
     tempOutput.includes('vue-class-component')
   ) {
-    node.add(';exports.default = {...exports.default.__vccBase};')
+    node.add(`
+      ;exports.default = {
+      ...exports.default.__vccBase,
+      ...exports.default.__vccOpts
+    };`)
   }
 
   if (tempOutput.includes('exports.render = render;')) {