使用typescript构建Vue应用的实现

以上就是<sciprt>内容最基本的写法，上面继承的Vue不是直接从”vue”模块中引入，而是从”vue-property-decorator”即vue属性装饰器模块中引入，当然也可以通过vue模块引入import Vue from “vue”，但是我们写.vue文件的时候通常要引入一些装饰器，同时这个装饰器类vue-property-decorator也提供了Vue，故可以直接从vue-property-decorator装饰器类上直接引入

④ 组件中data属性的写法，由于我们在.vue文件中声明了一个class，这个class就是Vue组件，我们可以直接在这个class中声明属性即可，这些声明的属性就是之前使用js写时的data属性中的数据，如:

export default class App extends Vue {
 public lists = [ // 这里就是之前Vue组件的data属性
  "Vue.js", "React.js", "Angular.js"
 ]}

⑤ 组件中的computed计算属性的写法，同样我们可以在class中声明get和set方法即可变成对应的computed属性，如:

export default class App extends Vue {
 public lists = [ // 这里就是之前Vue组件的data属性
  "Vue.js", "React.js", "Angular.js"
 ] public get count() { // 通过get和set实现计算属性
  return this.lists.length;
 }
}

⑥ 组件中方法的声明更简单，直接在class中声明方法即可，如:

export default class App extends Vue {
  public say() {
    console.log("say");
  }
}

⑦ @Component装饰器的使用，@Component装饰器就是用来标识当前这个类是一个Vue组件，@Component装饰器还可以传递对象作为参数，这个传递的对象就是Vue组件实例，所以所有之前用js写法的时候，Vue组件支持的所有选项都可以传入，如:

@Component({
  // 这里可以配置Vue组件支持的各种选项
  components: {
    HelloWorld
  },
  data() {
    return {
     a:1
    }
  },
  methods: {
    say(){
     console.log("say");
    }
  }
})
export default class App extends Vue {
}

@Component内容使用的是Vue.extend()方法，用于扩展Vue Component并生成Vue组件，这里需要注意的就是，Vue最终会将class中定义的属性和@Component中定义的属性进行合并，如果二者中定义了同名的属性，那么class中的优先级更高，即class中定义的会覆盖掉@Component中定义的同名属性，但是data除外，@Component中定义的同名的data数据会覆盖掉class中定义的同名data属性，如: