Vue.js class-based vs. JS object

Vue.js class-based and JS object by comparison #

• typescript class that extends the Vue object
• officially maintained
• vuejs organizaion on Github owns vue-class-component

skeleton #

class-based

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

@Component
export default class App extends Vue { ... }
</script>

old-way

<script>
export default { ... }
</script>

Component Name #

class-based

export default class HelloWorld extends Vue { ... }

old-way

export default {
  name: 'HelloWorld'
}

Data Properties #

class-based

member variables of a class

export default class HelloWorld extends Vue {
  isOpen: boolean = true
}

old-way

export default {
  data() {
    return {
      isOpen: true
    }
  }
}

Lifecycle Hooks #

class-based

member functions of a class

export default class HelloWorld extends Vue {
  mounted() {
    this.isOpen = false
  }
}

old-way

export default {
  mounted() {
    this.isOpen = false
  }
}

Computed Properties #

class-based

member functions of a class, needs a get accessor

export default class HelloWorld extends Vue {
  get allowClose(): boolean {
    return this.isOpen
  }
}

old-way

export default {
  computed: {
    allowClose() {
      return this.isOpen
    }
  }
}

Methods #

class-based

member functions of a class

export default class HelloWorld extends Vue {
  updateIsOpen(event) {
    this.isOpen = event.target.value
  }
}

old-way

export default {
  methods: {
    updateIsOpen(event) {
      this.isOpen = event.target.value
    }
  }
}

Watch #

class-based

import { Watch, Vue } from 'vue-property-decorator'

export default class HelloWorld extends Vue {
  // @Watch(propertyString, config)
  @Watch('isOpen')
  onPropertyChanged (value: string, oldValue: string) {
    this.redraw()
  }
}

old-way

export default {
  watch: {
    isOpen() {
      this.redraw()
    }
  }
}

Props #

class-based

import { Prop, Vue } from 'vue-property-decorator'

export default class HelloWorld extends Vue {
  // @Prop(config} name: type
  @Prop({ default: true }) isOpen!: boolean
}

old-way

export default {
  props: {
    isOpen: {
      type: Boolean,
      default: true
    }
  }
}

Include Components #

class-based

import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from './components/HelloWorld.vue'

@Component({
  components: {
    HelloWorld
  }
})
export default class App extends Vue { .. }

old-way

import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}