Vue：Vue Class Component的使用和注意点

发表于 分类于

基本使用

vue-class-component这个库主要用来方便以class的模式写Vue组件。

@component装饰器使类成为一个Vue组件，可以更加方便地编写Vue的配置项，方式如下：

  • data可以直接声明为类的属性；
  • methods可以直接声明为类的原型方法；
  • computed可以直接声明为类属性的getter和setter；
  • 所有Vue的生命周期钩子也可以直接声明为类的原型方法（但不能在实例上进行调用）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <OtherComponent />
</template>

import Vue from 'vue';
import Comonent from 'vue-class-component'
import OtherComponent from './OtherComponent.vue'

@Component({
  // 添加组件
  components: {
    OtherComponent
  }
})
// HelloWorld class will be a Vue component
export default class HelloWorld extends Vue {
	// 将data声明为类的属性	
	message = 'Hello world'
	
	// methods声明为类的方法
	printHello() {
		console.log(this.message)
	}
	
	// computed 声明为类的setter、getter
	set name(value) {
		this.message = value
	}
	get name() {
		return this.message
	}
	
	// 生命周期钩子
	mounted() {
	}
}

特别注意：data的响应式

使用Vue Class Component时，Vue的data可以声明成类的属性，但如果属性初始化的值为undefined，该属性将不会被激活，属性的变化不会被察觉。

Note that if the initial value is undefined, the class property will not be reactive which means the changes for the properties will not be detected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>{{ message }}</div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  // message的变化无法被察觉
  message = undefined
}
</script>

为了防止初始化值为undefined的属性不被察觉，可以将属性初始化为null或者使用data来hook：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
    }
  }
}