一、Vue項(xiàng)目初始化-引入typescript

使用typescript構(gòu)建Vue應(yīng)用和使用js一樣，都是通過(guò)vue-cli去初始化并創(chuàng)建一個(gè)vue項(xiàng)目，只不過(guò)使用typescript構(gòu)建的時(shí)候要在腳手架問(wèn)卷操作的時(shí)候勾選上typescript選項(xiàng)。

二、typescript Vue項(xiàng)目比較

使用typescript構(gòu)建的Vue項(xiàng)目發(fā)生了一些變化:
① main.js變成了main.ts，但是main.ts中的內(nèi)容和main.js的內(nèi)容是一模一樣的。
② router.js變成了router.ts，但是router.ts中的內(nèi)容和router.js中的內(nèi)容也是一模一樣的。
③ store.js變成了store.ts，但是store.ts中的內(nèi)容和store.ts中的內(nèi)容也是一模一樣的。

因?yàn)閠ypescript是javascript的超集，所以ts完全兼容js。

④ 新增了一個(gè)shims-vue.d.ts聲明文件，這個(gè)文件的作用就是讓typescript能夠識(shí)別.vue文件，在引入"*.vue"文件的時(shí)候，會(huì)將其標(biāo)識(shí)為一個(gè)Vue組件，才能對(duì).vue文件進(jìn)行類型校驗(yàn)，其具體內(nèi)容如下:

declare module '*.vue' {
 import Vue from 'vue'
 export default Vue
}

⑤ 新增了一個(gè)shims-tsx.d.ts文件，其作用就是為了能夠解析.tsx文件，對(duì).tsx文件進(jìn)行類型校驗(yàn)，其具體內(nèi)容如下:

import Vue, { VNode } from 'vue'
declare global {
 namespace JSX {
  interface Element extends VNode {}
  interface ElementClass extends Vue {}
  interface IntrinsicElements {
   [elem: string]: any
  }
 }
}

⑥ 當(dāng)然還會(huì)新增一個(gè)ts.config文件，這個(gè)是typescript的配置文件，具體內(nèi)容這里不作解釋，請(qǐng)參考tsconfig文件詳解

三、.vue文件內(nèi)容格式與寫法

使用typescript來(lái)寫Vue應(yīng)用，最主要的就是.vue文件，.vue文件寫法上與js有些不同并且新增了一些裝飾器，接著一步一步分析。

① 雖然.vue文件的格式和寫法上有了不同，但這不同只是<script></script>部分發(fā)生了變化，<template></template>和<style></style>和原來(lái)是一樣的，一個(gè)最簡(jiǎn)單.vue文件仍然可以使用如下寫法:

// HelloWorld.vue

<template>
  <div>
    hello world
  </div>
</template>

② 在寫<script></script>部分，第一點(diǎn)不同就是，<script>標(biāo)簽上要加上lang語(yǔ)言屬性，表示其中的內(nèi)容為ts，如:

<script lang="ts">
</script>

③ 默認(rèn)export上的不同，使用js的時(shí)候，我們是直接通過(guò)export default {}導(dǎo)出一個(gè)Vue組件對(duì)象即可，但是使用ts的時(shí)候，我們必須導(dǎo)出一個(gè)類class，類名為組件名，同時(shí)這個(gè)類必須繼承Vue，如:

// import Vue from "vue";
import { Component, Vue } from 'vue-property-decorator'; // 引入Vue及一些裝飾器
@Component
export default class App extends Vue { // 繼承Vue并導(dǎo)出Vue組件

}

以上就是<sciprt>內(nèi)容最基本的寫法，上面繼承的Vue不是直接從"vue"模塊中引入，而是從"vue-property-decorator"即vue屬性裝飾器模塊中引入，當(dāng)然也可以通過(guò)vue模塊引入import Vue from "vue"，但是我們寫.vue文件的時(shí)候通常要引入一些裝飾器，同時(shí)這個(gè)裝飾器類vue-property-decorator也提供了Vue，故可以直接從vue-property-decorator裝飾器類上直接引入

④ 組件中data屬性的寫法，由于我們?cè)?vue文件中聲明了一個(gè)class，這個(gè)class就是Vue組件，我們可以直接在這個(gè)class中聲明屬性即可，這些聲明的屬性就是之前使用js寫時(shí)的data屬性中的數(shù)據(jù)，如:

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

⑤ 組件中的computed計(jì)算屬性的寫法，同樣我們可以在class中聲明get和set方法即可變成對(duì)應(yīng)的computed屬性，如:

export default class App extends Vue {
 public lists = [ // 這里就是之前Vue組件的data屬性
  "Vue.js", "React.js", "Angular.js"
 ]
 public get count() { // 通過(guò)get和set實(shí)現(xiàn)計(jì)算屬性
  return this.lists.length;
 }
}

⑥ 組件中方法的聲明更簡(jiǎn)單，直接在class中聲明方法即可，如:

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

⑦ @Component裝飾器的使用，@Component裝飾器就是用來(lái)標(biāo)識(shí)當(dāng)前這個(gè)類是一個(gè)Vue組件，@Component裝飾器還可以傳遞對(duì)象作為參數(shù)，這個(gè)傳遞的對(duì)象就是Vue組件實(shí)例，所以所有之前用js寫法的時(shí)候，Vue組件支持的所有選項(xiàng)都可以傳入，如:

@Component({
  // 這里可以配置Vue組件支持的各種選項(xiàng)
  components: {
    HelloWorld
  },
  data() {
    return {
     a:1
    }
  },
  methods: {
    say(){
     console.log("say");
    }
  }
})
export default class App extends Vue {
}

@Component內(nèi)容使用的是Vue.extend()方法，用于擴(kuò)展Vue Component并生成Vue組件，這里需要注意的就是，Vue最終會(huì)將class中定義的屬性和@Component中定義的屬性進(jìn)行合并，如果二者中定義了同名的屬性，那么class中的優(yōu)先級(jí)更高，即class中定義的會(huì)覆蓋掉@Component中定義的同名屬性，但是data除外，@Component中定義的同名的data數(shù)據(jù)會(huì)覆蓋掉class中定義的同名data屬性，如:

@Component({
  data() {
    bar: 1
  },
  methods: {
    say(){
     console.log("say::@Component");
    }
  }
})
export default class App extends Vue {
  public bar: number = 2; // 這里的bar會(huì)被@Component中定義的bar覆蓋掉
  public say() { // 這里的say()方法會(huì)覆蓋掉@Component中定義的say方法
    console.log("say::class");
  }
}

還有一點(diǎn)要注意的是，@Component裝飾器千萬(wàn)不要漏寫，必須在組件類class前修飾

⑧ props屬性的寫法，使用ts寫Vue組件的時(shí)候，如果要在組件上定義props屬性，那么必須通過(guò)@Prop()裝飾器，其實(shí)就是在定義組件data屬性的時(shí)候用@Prop()裝飾器進(jìn)行修飾，如果沒(méi)有通過(guò)@Propp()進(jìn)行修飾，那么定義的屬性就是組件的data屬性，可以給@Prop()傳遞一個(gè)配置對(duì)象，可以定義傳遞屬性的default、required、type等屬性，如:

import { Component, Vue, Prop } from 'vue-property-decorator';
@Component // 不要忘了用@Component修飾組件class喲
export default class HelloWorld extends Vue {
  @Prop() public bar!: string; // 這里定義的是props屬性
  public foo = "foo"; // 這里定義的是data屬性
  @Prop({type: String, default:"foo", required: true}) public foo!: string;
}
</script>

需要注意的是，public foo!: string，這里聲明的string類型是不起作用的，要限定父組件傳入的foo屬性的數(shù)據(jù)類型，必須在@Prop()裝飾器內(nèi)限定數(shù)據(jù)類型，否則無(wú)效

⑨ @Emit()裝飾器的使用，在子組件發(fā)射自定義事件的時(shí)候通常會(huì)通過(guò)this.$emit("say")的方式，但是typescript提供了一個(gè)@Emit()裝飾器，用于修飾一個(gè)方法，當(dāng)這個(gè)方法被執(zhí)行的時(shí)候，就會(huì)在方法執(zhí)行完成后發(fā)射一個(gè)同方法名的事件出去，當(dāng)然，這是在沒(méi)有給@Emit()傳遞參數(shù)的情況下，如果給@Emit()傳遞了參數(shù)，那么就會(huì)發(fā)射指定參數(shù)的事件，如:

export default class HelloWorld extends Vue {
  @Emit() // 在say()方法執(zhí)行完成后會(huì)發(fā)射一個(gè)同方法名的say事件
  public say() {
  }
  @Emit("speak") // 這里給@Emit()傳遞了參數(shù)，則會(huì)發(fā)射speak事件
  public say() {
  }
}

⑩ @Watch()裝飾器的使用，其擁有監(jiān)聽(tīng)組件中數(shù)據(jù)的變化，就相當(dāng)于$watch，需要給其傳遞一個(gè)字符串參數(shù)，表示其監(jiān)聽(tīng)的是哪個(gè)數(shù)據(jù)的變化，如:

@Watch("foo") // 監(jiān)聽(tīng)this.foo的變化
public add(newValue: number, oldValue: number) {
 console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

四、vuex中的變化

vuex中的數(shù)據(jù)是存放在state屬性上的，如果要限定state中數(shù)據(jù)的屬性和類型，那么我們必須在創(chuàng)建store對(duì)象的時(shí)候定義一個(gè)接口限定一下數(shù)據(jù)類型，如:

interface IState {
 lists: string[]
}
export default new Vuex.Store<IState>({
  state: {
    lists: ["vue"] // 定義了state的數(shù)據(jù)結(jié)構(gòu)，必須要有l(wèi)ists屬性，并且屬性值為string[]
  }
});

獲取vuex中的數(shù)據(jù)時(shí)候，還是可以通過(guò)this.$store.state.lists獲取到，但是我們也可以通過(guò)裝飾器獲取到，要使用vuex的裝飾器，我們需要安裝vuex-class，如:

import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {
  // 將從vuex中獲取到的lists數(shù)據(jù)保存到組件的lists屬性上
  @State("lists") public lists!: string[];
  @Mutation("say") // 在say()方法前修飾，當(dāng)say()方法執(zhí)行的時(shí)候就會(huì)提交一個(gè)say mutation
  public say() {
   console.log("say1");
  }
  @Action("speak") // 在speak()方法前修飾，當(dāng)speak()方法執(zhí)行的時(shí)候就會(huì)提交一個(gè)speak action
  public speak(){
  }
  public mounted () {
   this.say();
   this.speak();
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論