二、手把手教你 Vue2+Ts

Vue2+Ts

上一节，搭建好vue2+ts,打开router文件下的index.ts

,先去查看home.vue

疑点重重

什么是 vue-property-decorator
打开home.vue 迎面扑来挺熟悉的代码,但又感觉哪里不太对。import我知道，这个@Component是什么玩意？vue-property-decorator又是什么？

<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component({
    components: {
        HelloWorld,
    },
})
export default class Home extends Vue {
   ···
}
</script>

带着上面的疑问,打开了官网。
基于类的 Vue 组件

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({ // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>' })
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的
  property message: string = 'Hello!'
// 组件方法也可以直接声明为实例的方法
  onClick (): void { window.alert(this.message)
  }
}

原来@Component修饰符注明了此类为一个 Vue 组件,但是这块发现
官网是

import Component from 'vue-class-component'

，而项目中是

import {Component, Vue} from "vue-property-decorator";

上一个还没搞清楚又来一个,王德发!!!

突发奇想

我们可以在代码中同时引用 vue-class-component 、vue-property-decorator 然后点进源码看看到底是个啥。

import {Component, Vue} from "vue-property-decorator";
import Component from "vue-class-component";

vue-property-decorator

vue-property-decorator在源码里引用了vue-class-component

vue-class-component

原来是这样,看来我错怪王德发了。

蓦然回首

• vue-class-component: vue-class-component是一个 Class Decorator,也就是类的装饰器

• vue-property-decorator: vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展