watch
- 觀察特定的值
- 變數發生變化偵測觸發
- 傳入引數-改變前與改變後
- e.g.user input/change data /login
- 適用時機在資料值一直會有變化的時候
- 得到最後結果前,可以設置中間狀態
watch
响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这方式是最有用的。- 在做事件處理的時候,當事件被觸發,資料異動了,通常這時候我們會需要監聽器去聽到觸發事件的啟動並去呼叫對應的處理器,並讓它做事情。
- 你如果有更動這筆資料,就會執行這個fun
watch
雖然好用,但如果function太多,資料關聯也愈複雜的話,或許就可以考慮用computed
寫寫看了。- 我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部,这样的好处就是降低我们程序的耦合度,使程序变的灵活
computed
- 收納 template 邏輯,即時更動資料就靠它
- 具有資料緩存,效能好,資料不會重新渲染
- 運算類較複雜都放computed,即時呈現小幫手
- 如果computed沒有設定到data值的話,他是不會更動的
- return沒使用,不會更動
- 解決模板(View)上程式邏輯過多的問題
- 暫存運算結果
- 可以更高效解決問題
- 不確定每次都會更新,請用 Computed
- 無法帶參數單獨執行FUN
- 如果 data 內容如果一樣不會重算
- computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号…
methods
- 帶參數單獨執行FUN
- 確定每次都會更新,就用 metdos
- Method 如果 data 內容如果一樣就還是會全部重算
- 傳參數寫在click裡面並在vue引入參數使用
- 不应该使用箭头函数来定义 method 函数
computed
vsmethods
| 比較 |
computed
|methods
| | :--- | :--- | :--- | | 特徵 |computed
會依賴屬性data
中的資料,前面提到computed
有cache,computed
執行完的運算結果會暫存到cache,所以如果相依的資料不變,就不會重新計算,直接從cache回傳暫存資料。 |methods
只要重新渲染元素呼叫到函式,就會重新計算一次。 | | 回傳資料時機 | 從data
取得資料並處理完後直接回傳給View顯示。 | 需在View呼叫函式才會執行。 | | 適用時機 | 因為會暫存結果,所以適用運算結果資料不會改變時,效能也會比較好。 | 需要每次更新且不要暫存結果,適合狀態的改變。 |