但是，解释器读到函数修饰符“@”的时候，后面步骤会是这样：
去调用
test 函数，
test 函数的入口参数就是那个叫“
func ”的函数；
test 函数被执行，入口参数的（也就是
func 函数）会被调用（执行）；换言之，修饰符带的那个函数的入口参数，就是下面的那个整个的函数。有点儿类似
JavaScrip t里面的
function a (function () { ... });
2.
vue-property-decorator 和
vuex-class 提供的装饰器
vue-property-decorator 的装饰器： @Prop
@PropSync
@Provide
@Model
@Watch
@Inject
@Provide
@Emit
@Component (provided byvue-class-component)
Mixins (the helper function named mixins provided by vue-class-component)
vuex-class 的装饰器： @State
@Getter
@Action
@Mutation
我们拿原始Vue组件模版来看：
import {componentA,componentB} from '@/components';export default {
components: { componentA, componentB},
props: {
propA: { type: Number },
propB: { default: 'default value' },
propC: { type: [String, Boolean] },
}
// 组件数据
data () {
return {
message: 'Hello'
}
},
// 计算属性
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
// Vuex数据
step() {
return this.$store.state.count
}
},
methods: {
changeMessage () {
this.message = "Good bye"
},
getName() {
let name = this.$store.getters['person/name'] return name
}
},
// 生命周期
created () { },
mounted () { },
updated () { },
destroyed () { }
}
以上模版替换成修饰符写法则是：
import { Component, Vue, Prop } from 'vue-property-decorator';
import { State, Getter } from 'vuex-class';
import { count, name } from '@/person'
import { componentA, componentB } from '@/components';@Component({
components:{ componentA, componentB},
})
export default class HelloWorld extends Vue{
@Prop(Number) readonly propA!: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean | undefined
