本文我們透過案例來介紹下 watch 和 computed 的使用，案例效果如下：

在這裡插入圖片描述

如上，該案例就是實現一個簡單的名稱拼接處理。實現的方式也比較多，本文我們會分別採用三種方式來實現。

一、案例實現

基礎頁面：

+

=

var vm = new Vue（{

el： “#app”，

data： {}，

methods： {}

}）

1。普通DOM操作實現

看到上面的效果，相信大家透過普通的dom物件操作都能夠實現這個效果，我們也來實現下，如下：

首先我們給三個 input 輸入框和 vm例項 做雙向繫結

在這裡插入圖片描述

然後我們給 firstname 和 lastname 的輸入框分別繫結 keyup 事件，然後在 vm 例項的 methods 中定義拼接名稱的方法

在這裡插入圖片描述

搞定！效果如下：

在這裡插入圖片描述

2。watch使用

接下來我們再來看下透過watch來實現上面的效果。

在這裡插入圖片描述

watch 會監視 data 中指定的資料，當這些資料發生變動的時候會觸發對應的 function來處理相關的業務。

此處可能大家會比較疑惑，watch 需要監視 firstname 和 lastname 這兩個資訊，而 我們透過 keyup 只需要在 methods 中定義一個方法就可以了，感覺watch 反而沒有前面例子中來的方便，那麼 watch 的作用還有什麼呢？前面的事件監聽只能處理DOM元素而針對 路由的變化就無能為力了，所以我們來看下下面這個案例

// 建立兩個元件

var login = {

template： “這是個登入元件”

}

var register = {

template： “這是個註冊元件”

}

var routerObj = new VueRouter（{

routes：［

{ path ： “/login” ， component ： login }，

{ path ： “/register” ， component ： register }

］

}）

var vm = new Vue（{

el： “#app”，

data： {}，

methods： {}，

router： routerObj

}）

效果

在這裡插入圖片描述

現在我們希望能夠在路由變化的時候來捕獲到這個行為，並給出對應的響應。這時我們可以監視 vm。$route。path 來處理

在這裡插入圖片描述

所以可以如下方式實現

在這裡插入圖片描述

在這裡插入圖片描述

watch 監視路由變化的效果搞定~

3。computed使用

最後我們來看下 computed 怎麼來實現上面案例的效果的。

在這裡插入圖片描述

在 computed 中，可以定義一些 屬性，這些屬性，叫做 計算屬性， 計算屬性的本質，就是 一個方法，只不過，我們在使用 這些計算屬性的時候，是把 它們的 名稱，直接當作 屬性來使用的；並不會把計算屬性，當作方法去呼叫；

計算屬性，在引用的時候，一定不要加 （） 去呼叫，直接把它 當作 普通 屬性去使用就好了；

只要 計算屬性，這個 function 內部，所用到的 任何 data 中的資料傳送了變化，就會 立即重新計算 這個 計算屬性的值

計算屬性的求值結果，會被快取起來，方便下次直接使用；如果 計算屬性方法中，所以來的任何資料，都沒有發生過變化，則不會重新對 計算屬性求值；

完整程式碼

+

=

var vm = new Vue（{

el： “#app”，

data： {

firstname ： “”，

lastname ： “”

}，

methods： {} ，

computed： {

‘fullname’ ： function（）{

return this。firstname + ‘-’ + this。lastname

}

}

}）

二、methods、watch、computed的區別

最後來看下這三者的區別，具體如下：

元素描述computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用methods方法表示一個具體的操作，主要書寫業務邏輯watch一個物件，鍵是需要觀察的表示式，值是對應回撥函式。主要用來監聽某些特定資料的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體

好了本文就介紹到此~有問題的小夥伴歡迎留言交流哦

https：//www。ixiera。com 轉發自波哥帶你學程式設計