優化Angularjs的$watch方法

Angularjs的$watch相信你們都知道，並且也常常使用，甚至，你還在爲它的某些行爲感到惱火。好比，一進入頁面，它就會調用一次，我明明但願它在我初始化以後，值再次變更才調用。這種行爲給咱們帶來許多麻煩。而咱們今天就是要優化$watch的寫法，來解決這些問題。

一.推薦寫法：

$scope.$watch('xxx',function(newVal,oldVal){
if(newVal === oldVal || oldVal==undefined){
  //不執行代碼
}else{
  //執行你的代碼
}})

爲何這麼寫？聽我慢慢道來。

1.newVal===oldVal

首先，咱們作一個測試。

$scope.$watch('name',function(newVal,oldVal){
    console.log('oldVal',oldVal)        //undefined
    console.log('newVal',newVal)        //undefined
    if(newVal === oldVal || oldVal==undefined){
    //不執行代碼
    }else{
  //執行你的代碼
    }
})

咱們監聽name的改變，一開始進來，沒有初始化時，都爲undefined。

而後，咱們先定義name

$scope.name="張三";
$scope.$watch('name',function(newVal,oldVal){
    console.log('oldVal',oldVal)        //張三
    console.log('newVal',newVal)        //張三
    if(newVal === oldVal || oldVal==undefined){
    //不執行代碼
    }else{
  //執行你的代碼
}})

能夠看到,一開始進來就都是張三。
由此可知，當監聽器函數初始化時，newVal和oldVal老是相等的，因此，此時咱們能夠判斷兩個值是否相等，來執行咱們想要的操做。

2.oldVal==undefined

爲何要判斷oldVal==undefined?由於，當咱們給name賦值的時候，會有一個undefinde變爲有值的過程。因此當你不想在第一次賦值時，就執行方法，這麼幹就對了。
咱們給name的賦值套一個timeout，模仿異步調用，在實際項目中，咱們的name一般都是從接口獲取的。

$timeout(function(){
$scope.name="張三";
},500)

而後，你再觀察一下watch

$scope.$watch('name',function(newVal,oldVal){
    console.log('oldVal',oldVal)        //undefined
    console.log('newVal',newVal)        //張三
    if(newVal === oldVal || oldVal==undefined){
    //不執行代碼
    }else{
  //執行你的代碼
}})

以上就是watch須要注意的一些事項。而後，咱們接下來討論的是如何監聽數組的變化，這就要用到另外一個監聽方法,$watchCollection。

二.watchCollection

你們，能夠運行如下代碼，
https://codepen.io/hanwolfxue/pen/XYyVYv?editors=1010
出來的樣子長這樣

好好觀察一下watch和watchCollection的行爲，能夠發現watch是監聽不到數組的變化的，因此，若是你要監聽的是一個數組的話，請用watchCollection代替watch.

以上兩點就是今天要說的優化，固然$watch還有不少其餘內容，感興趣的小夥伴能夠繼續研究一下。