vue-property-decoratorvue.cli3生成vue项目，选用TypeScript，引入vue-pro

vue.cli3生成vue项目，选用TypeScript，引入vue-property-decorator库

@Component

beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

使用beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate跟之前使用区别，需要使用Component.registerHooks方法注入钩子函数

<template>
...
</template>
import { Component, Prop, Vue } from 'vue-property-decorator';
Component.registerHooks([
  'beforeRouteUpdate',
  'beforeRouteLeave',
  'beforeRouteLeave'
])
@Component({})
export default class Hello extends Vue {
    beforeRouteUpdate (to, from, next) {
        // react to route changes...
        // don't forget to call next()
    }
    beforeRouteLeave (to, from, next) {
        // react to route changes...
        // don't forget to call next()
    }
    beforeRouteUpdate (to, from, next) {
        // react to route changes...
        // don't forget to call next()
    }
}
</script>

迭代组件，命名组件名称

迭代使用组件，如开发树形菜单组件

//HelloWorld.vue
<template>
...
    <treeList></treeList>
...
</template>
import { Component, Prop, Vue } from 'vue-property-decorator';
import treeList from '../components/treeList.vue'
@Component({})
export default class HelloWorld extends Vue {
}
</script>

//treeList.vue
<template>
...
        <treeList></treeList
...
</template>
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
    name: "treeList"    //此处声明组件name
})
export default class treeList extends Vue {
}
</script>