优化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还有很多其他内容，感兴趣的小伙伴可以继续研究一下。