下面给大家提供了一个实例完整的ts示例：

    • 包含前面讲到的所有实例选项，以及router导航守卫周期、vuex使用等
    • 包含各个选项、属性的顺序排列。结合了部分官方的推荐 Vue 风格指南 - 组件/实例的选项的顺序
    • 包含各属性的public、private等修饰符的使用

    这里例子比较简单，仅是为了展示大部分的属性，若要更细致的了解各实例选项的写法，可以参考前面的文章。

    1. // TodoApp.vue
    2. <template>
    3.   <div class="todo-app">
    4.     <div ref="refTitle">
    5.       this is title {{ UserModule.allName }} - {{ userAge }}
    6.     </div>
    7.     <TodoItem ref="refTodoItem" />
    8.   </div>
    9. </template>
    11. <script lang="ts">
    12. import { Component, Mixins, Prop, Emit, Watch, Provide, Inject, Ref } from 'vue-property-decorator'
    13. import { Route, NavigationGuardNext } from 'vue-router'
    15. import TodoItem from '@/components/TodoItem.vue'
    16. import colorDirective from '@/directive/colorDirective'
    17. import FormMixins from '@/mixins/FormMixins'
    18. import UserMixins from '@/mixins/UserMixins'
    19. import { UserModule } from '@/store/modules/user'
    21. type gender = '男' | '女'
    23. @Component({
    24.   components: { TodoItem },
    25.   directives: {
    26.     color: colorDirective,
    27.   },
    28.   filters: {
    29.     formatUserName(val: string) {
    30.       return `姓名：${val}`
    31.     },
    32.   },
    33. })
    34. export default class TodoApp extends Mixins(FormMixins, UserMixins) {
    35.   // ref
    36.   @Ref('refTitle') readonly refTitle!: HTMLDivElement // DOM
    37.   @Ref('refTodoItem') readonly refTodoItem!: TodoItem // Vue Component
    39.   // provide
    40.   @Provide('department') public department = '销售部'
    41.   // inject
    42.   @Inject('userId') public injectUserId = 1
    44.   // Model
    45.   @Model('user-age')
    46.   readonly userAge!: number
    48.   // prop
    49.   @Prop({ type: [String, Number], default: '' })
    50.   readonly userId!: string | number
    52.   // emit
    53.   @Emit('user-age')
    54.   public emitAgeChange(age: number) {
    55.     return age
    56.   }
    57.   @Emit('add-to-count')
    58.   public emitAddToCount(val: number) {
    59.     return val
    60.   }
    62.   // Vuex store module
    63.   public readonly UserModule = UserModule
    65.   // data
    66.   public userName: string = '韩梅梅'
    67.   public gender: gender = '女'
    69.   // computed
    70.   public get userInfo(): string {
    71.     return `性别：${this.gender}，姓名：${this.userInfo}`
    72.   }
    74.   // watch
    75.   @Watch('gender', { immediate: true, deep: true })
    76.   private onGenderChange(newVal: gender, oldVal: gender) {
    77.     console.log('新：', newVal)
    78.     console.log('旧：', oldVal)
    79.   }
    81.   // Hook: 生命周期
    82.   private mounted() {
    83.     console.log('mounted')
    84.   }
    85.   private beforeDestroy() {
    86.     console.log('beforeDestroy')
    87.   }
    88.   // Hook: 导航守卫
    89.   private beforeRouteEnter(_to: Route, _from: Route, next: NavigationGuardNext) {
    90.     next()
    91.   }
    92.   private beforeRouteLeave(_to: Route, _from: Route, next: NavigationGuardNext) {
    93.     next()
    94.   }
    96.   // methods
    97.   public changeUserGender(gender: gender) {
    98.     this.gender = gender
    99.   }
    100. }
    101. </script>