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:
- 支持缓存,只有依赖的数据发生变化时,才会重新计算。
- 不支持异步,若有,则无法监听数据变化。
- 一个属性由其他属性计算而来。(多对一、一对一)。
<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:
- 不支持缓存。
- 支持异步。
- 可以接收两个值:
oldVal
、newVal
- 一个属性发生变化时,需执行对应操作。
// 普通写法:
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滥用会造成污染。