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