logo头像

求知若渴,虚心若愚

Vue - Vue过滤器、计算属性、属性侦听和延迟调用debounce

过滤器filter

  • 进行一些常见的文本格式化
  • 可以用在差值表达式和v-bind中

全局过滤器

  • Vue.filter
1
2
3
4
5
6
7
8
9
10
// capitalize 过滤器名称
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})

局部过滤器

  • filters
1
2
3
4
5
6
7
8
// capitalize 过滤器名称
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

过滤器使用

1
2
3
4
5
<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
  • 竖线 ‘ | ’:管道,操作系统中也有管道这个概念

计算属性computed

  • 对于一些复杂逻辑的数据处理,你都应当使用计算属性
  • 关键字:computed
  • 计算属性是有缓存的,只有当他的依赖项发生变化时,才会被重新计算
    • 对比与methods中的方法,每次调用都会被计算,所以性能消耗比computed大
1
2
3
4
5
computed: {
sum: function () {
return data.a + data.b
}
}
  • 注意:计算属性不能与data中提供的数据重名, 否则会报错

属性侦听watch

  • 用于观察Vue实例上的数据变动,watch是一个对象,一定要当成对象来用
  • 对象的键
    • 就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量
  • 值可以是函数:
    • 就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
  • 值也可以是函数名:

    • 不过这个函数名要用单引号来包裹。
  • 值是包括选项的对象:

    • 包含三个选项
    • handler:
      • 其值是一个回调函数。即监听到变化时应该执行的函数。
    • deep:
      • 其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
    • immediate:
      • 其值是true或false;确认是否以当前的初始值执行handler的函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var vm = new Vue({
data: {
a: 1,
b: 2
},
watch: {
// 函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 选项的对象
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
immediate: true
}
}
})

debounce

  • 一个通过 Lodash 限制操作频率的函数

  • debounce用于延迟调⽤用,延迟触发

  • 让一个方法在一定时间内只能执行一次
  • 使用场景:
    • 监听用户的输入,单位时间内用户不在进行输入,自动发送请求
    • 如果用户连续输入,间隔小于我们设置的时间,是不会出发请求的
    • 比如某个按钮,用户连续点击,可以只相应一次
支付宝打赏 微信打赏

赞赏是对我们的肯定!