Vue Class Component详解

类组件

1. @component

使用@Component注解，将类转化为 vue 的组件，以下是一个示例

import vue from 'vue'
import Component from 'vue-class-component'


// HelloWorld class will be a Vue component
@Component
export default class HelloWorld extends Vue {
   }

2. Data属性

data属性初始化可以被声明为类的属性。

<template>
  <div>{
   {
    message }}</div>
</template>


<script>
import Vue from 'vue'
import Component from 'vue-class-component'


@Component
export default class HelloWorld extends Vue {
   
  // Declared as component data
  message = 'Hello World!'
}
</script>

需要注意的是，如果初始值是undefined，则类属性将不会是相应式的，这意味着不会检测到属性的更改：

import Vue from 'vue'
import Component from 'vue-class-component'


@Component
export default class HelloWorld extends Vue {
   
  // `message` will not be reactive value
  message = undefined
}

为了避免这种情况，可以使用 null 对值进行初始化，或者使用 data()构造钩子函数，如下：

import Vue from 'vue'
import Component from 'vue-class-component'


@Component
export default class HelloWorld extends Vue {
   
  // `message` will be reactive with `null` value
  message = null


  // See Hooks section for details about `data` hook inside class.
  data() {
   
    return {
   
      // `hello` will be reactive as it is declared via `data` hook.
      hello: undefined