（5）vue 过滤器、计算属性、watch

1. 过滤器：Filter

过滤器就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。

* 局部过滤器
filters: {
   filterA (value) {
 		return 'hello' + value   //filter需要用return返回
   }
},
  
  
* 全局过滤器：  注意：在new Vue({}) 之前
Vue.filter('filterB', function (value) {
   if (!value) return ''
   value = value+'world'
   return value
})

* 多个过滤器串联
{{ food | filterA | filterB | filterC | filterA }}

filter vs method：  filter可以在main.js里设置全局过滤，方法只能定义在一个页面里，切串联使用麻烦

需要注意的问题：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了。

过滤器的参数写法：

1. {{ message | filterA | filterB }}

2. {{ message | filterA('arg1', arg2) }}

3. {{ 'a','b' | filterB }}

2. 计算属性：Computed

computed:

1. 支持缓存，只有依赖的数据发生变化时，才会重新计算。
2. 不支持异步，若有，则无法监听数据变化。
3. 一个属性由其他属性计算而来。（多对一、一对一）。

<p>{{ fullName}}</p>

fullName: function () {
   return this.firstName + this.lastName   //直接return返回值
}

/** computed传参 */
price (ll) {
   return function (ll) {
      return this.banana * this.count * ll
   }
}

3. watch

watch:

1. 不支持缓存。
2. 支持异步。
3. 可以接收两个值：oldVal、newVal
4. 一个属性发生变化时，需执行对应操作。

// 普通写法：
watch: {
 fullName: function(oldValue, newValue) {
 	console.log(newValue)
 	}
 }
// 深度写法
watch: {
	 fullName: {            //对象：'fullName.id'
		deep: true,
		immediate: true,
		handler(val) {
	 		console.log(val)
		}
	}
}

deep: true       是否深度监听
immediate: true  初次是否监听

4. computed 和 watch的区别：

• watch 一次只能监听一个值，computed 可以对依赖的所有值监听。

• computed支持缓存，如果依赖项没改变会优先从缓存中取数据，方法不支持缓存，watch不支持缓存，只要数据变就会执行相应操作。

• computed不支持异步，watch支持异步。

• watch滥用会造成污染。