其實 ts 在?vue 的環境下，我們經常用的一個東西就是上一篇博客講的裝飾器。

裝飾器一般情況下有三種用途：

1，裝飾整個類。

2，裝飾某一個方法。

3，裝飾某一個屬性。

而這三種用途對 vue 來說，都是很重要的。

其實我們已經認識了第一種裝飾器，就是我們平時最常用的：

import?{?Component }?from?"vue-property-decorator";

Component 裝飾器在目前的 Vue 版本里面是必須的。

就是說，就算你用 class 的寫法，你也必須得加這個 Component。

然后我們將 App.vue 里面的東西清空，讓我們自己來寫。

首先第一件事，我們要在 script 標簽上面加上?lang="ts"。

然后，第二件事，就需要引裝飾器：

需要注意的是：Component 必須裝飾在 class 上，否則它沒有辦法作為一個組件類存在。

然后現在有個問題，我們需要明確，就是這里的 Vue 它到底是什么？

首先，我們可以像以前那么寫，直接從 vue 庫里面引入。

然后，我們也可以在 decorator 里面去引一個 vue。

可以看到，兩種寫法都不會報錯，也都能出來。

那么這兩個 Vue 到底有什么區別呢？

其實 decorator 它這里的 Vue 存在的價值，就是可以讓我們少引一個庫。

等于說，它替我們在這個 Vue 給引進來了，這樣我們就可以少寫一個 import。

所以它這里的 Vue 其實并不是一個真正意義上的裝飾器，它就是普通的 Vue。

然后我們知道了，所謂“裝飾器” 里面的 Vue，其實就是 Vue。我們引哪個都行，它只給提供給我們一個快捷的寫法而已。

接下來，我們就真正去把一個普通的 Component 寫成 class 的形式。

data 里面的東西，可以全都寫成 成員屬性。

生命周期 和 methods 里面的東西，可以全都寫成 成員方法。

computed?里面的東西，一律寫成訪問器方法，也就是 get / set。

props 對應的是屬性修飾器 @Prop。

我們先來看下原先的寫法，方便做一個對比。

創建一個子組件 Cmp，然后在 App 里面引入。

這里需要注意的一點是，組件之間的引用，還是需要借助裝飾器 @Component。

這是因為尤大大并沒有提供方法來寫 components。

所以?components 只能放在裝飾器里面。

然后我們在用?class 的形式寫出 props：

寫完之后我們會發現，瀏覽器報錯了：

它說，你要避免去給屬性賦值。

簡單來說，子組件 Cmp 中的 a 并不是一個普通的屬性。

這里的 a 是父級傳給它的 props。

所以我們不能給它初始化的時候賦值。

去掉賦值，就不會報錯了。

但是你仔細看， private a 的下面有一個小紅線，說明還是有問題的。

別急，先留個印象，我們繼續往下看。

那么我們怎么去限制 props 的類型呢？有兩種寫法。

@Component 里面，就是我們原來的寫法。

寫在 @Component 里面，和寫在 @Prop 里面，兩種效果是等同的。

那我們可以在 private a 后面加嗎？

我們傳的是一個數字，但我們限制的類型是?string。

但是瀏覽器沒有報錯，也沒其他的反應。

其實它報錯了，只不過是在后臺報的，還記得上面的那個小紅線嗎？

這個報錯的意思是，你的 a 沒有初始值。

好的，那我們重新再加上初始值。

這時候，后臺是不報錯了，但是前臺又報錯了，就是我們最開始遇到的第一個問題。

因為a 是父級傳給它的 props。所以我們不能給它初始化的時候賦值。

那么問題就來了：

加了初始值，前臺報錯。

不加初始值，后臺報錯。

那你要我怎么做嘛？

其實在 ts 里面有一個東西可以幫助我們來解決這個問題。就是 !?符號。

那么加上 ! 符號的意思是什么呢？

意思就是，我知道這個 a 沒有初始化，沒關系，你先放我過去，我以后會初始化它的。

所以 ! 這個標志，是用來告訴 ts，我這個東西以后一定會賦值的，你就不要報錯了。

問題解決了，那么我們繼續。其實我個人是建議兩個 number 都加上的。

@Prop(Number) 其實是 Vue 來做的一個檢查。簡單來說，如果你給的參數不對，Vue 會報錯。

private a: number 這個是屬于 Vue 那邊已經放它過來了，然后到了真正給它去賦值的階段，ts 還要再檢查一遍。

所以個人建議，2 個都加上比較保險。

然后因為 props 有時候會比較多，所以我們一般都是不換行來寫：

那么如果這個 a 既可能是數字，也可能是字符串呢？

@Prop([Number, String]) 這個數組，就是我能接受的類型的數組。

number | string 這個是 ts 里面的語法，聯合類型。

那如果我們還需要默認值和驗證函數呢？

其實和原先的寫法是一樣的，我們可以直接寫一個 json 進去。

所以，@Prop 其實就是把原來寫在 @Component 里面的東西給拆出來了而已。

@Prop 里面還需要注意的一點是：大小寫。

后面的 number 大寫小寫都行，不會報錯。

這是因為 number 是 ts 的內置類型，基本類型。Number 是 js 里面的一個 class。

所以它們差不多是等同的。

但是，在@Prop 里面只能大寫！小寫就會報錯。

這是因為 number 在 ts 里面，它不是一個東西，它是一個類型。

前面我們有說過，裝飾器它本質上就是一個函數，@Prop(number) 相當于在給函數傳參。

我們可以傳一個數作為參數，也可以傳一個類作為參數，都沒問題。

但是我們不能傳一個類型作為參數。

泛型才可以將類型作為參數傳進去，但是函數不行。

watch 對應的是方法修飾器 @Watch 。

首先，我們引入 Watch 這個裝飾器。

@Watch('num') 的意思，就是我要監聽變量 num。

然后下面聲明的?numChange 方法，就是當 num 改變了，就會觸發這個方法。

那么，以前的寫法里面，還有開始就先執行一次的 immediate，和深度監聽 deep。

那么在 class 里面怎么寫呢？

直接在 @Watch 里面加參數就可以了。

其實這種寫法的 watch 特別適合我們去取數據。

上圖中，@Watch 可以直接這樣累加的寫進來，是很方便的。

當 filters 變了的時候，觸發一次 reloadDate 方法。

當 page 變了的時候，觸發一次 reloadDate 方法。

所以 @Watch 可以同時監聽多種東西，這一點是非常實用的。

并且我們聲明了 reloadDate 這個方法，它本身也可以在其他位置用。

因為它本身就是一個普通的方法而已，只不過我們在它上面加了兩個裝飾器而已。

所以現在的 @Watch 比以前寫法的 watch 要方便很多。尤其是數據獲取這一塊。

$emit 對應的 @Emit 事件傳遞

其實這個并不常用，也不實用。

我們還是先用原來的寫一遍，來做個對比。

比如，現在子組件 Cmp 有一個按鈕，點擊的時候，執行 fn 函數，并且 $emit 給父級。

那么當我們點擊這個按鈕的時候：

其實就是子組件 Cmp 自己在處理?fn 這個事件的同時，還順便把這個事件傳遞給父級 App 了。

$emit 在 class 里面的寫法就很方便了：

我們先注釋掉 $emit。然后引入 Emit，直接放到 fn 上面。

這里需要說一點，除了 @Component 以外的裝飾器，全都需要帶上括號。

其實說白了，@Emit 的本質就是在方法執行結束之后替你去做一個 $emit，并且默認的事件名，就是你的方法名。

比如，我現在將事件名改為 xyz：

所以，有了 @Emit 這個裝飾器之后，就不需要你手動的去寫 $emit 了，它會自動的幫你去做傳遞。

但是我們項目中如果真的需要用到事件傳遞的時候，其實都還是 $emit 這種寫法。

因為說實話，@Emit 這個裝飾器有點不夠靈活，因為它是必然發送的。

但是我們在項目中的實際開發，很多邏輯都是需要做過判斷之后，在決定發不發。

也就是有的時候需要發，有的時候不需要發。

但是用了 @Emit 之后，就必然會發送，所以我們基本不會用到。

總結

以上是生活随笔為你收集整理的ts watch路由 参数变化_TypeScript基础（六）：TS 在 Vue 中的用法，data，生命周期，methods，computed，props，watch，$emit...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。