计算属性
计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
reversedMessage () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
与使用methods里的函数相比,每当触发重新渲染时,methods里的函数会再次执行,因为没有缓存。
侦听器
侦听器:
一个对象,键是需要观察的表达式,值是对应回调函数
,也可以是方法名
,或者包含选项的对象
。
Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。
watch: {
// 值可以是一个回调函数
a: function (val, oldVal) { /* ... */ },
// 值还可以是一个方法名
b: 'someMethod',
// 值还可以是一个对象
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true, // 回调会在任何被侦听的对象的 property 改变时被调用, 不论其被嵌套多深
immediate: true // 回调将会在侦听开始之后被立即调用, 而不是侦听的数据更改后才会调用
}
}
// deep
// 默认情况下, 侦听器侦听对象只侦听引用的变化, 只有在给对象赋值时它才能被监听到。
// 所以需要使用deep选项, 让其可以发现对象内部值的变化, 将deep的值设置为true, 那么无论该对象被嵌套的有多深, 都会被侦听到。
过滤器
过滤器可以用在两个地方:双花括号插值和 v-bind
表达式。
<!-- 在双花括号中 -->
<!-- 过滤器函数总将表达式的值作为第一个参数。本例, capitalize 过滤器函数将 message 的值作为第一个参数。 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 过滤器可以串联 -->
{{ message | filterA | filterB }}
<!-- filterA 被定义为接收三个参数的过滤器函数。 -->
<!-- 其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数, 表达式 arg2 的值作为第三个参数. -->
{{ message | filterA('arg1', arg2) }}
filters: {
capitalize (value) {
if (!value) return ''
return value.toString().charAt(0).toUpperCase() + value.toString().slice(1)
}
}
this.$watch
// 三个参数: 一参为被侦听的数据, 二参为数据改变时callBack, 三参可选为设置的选项对象
vm.$watch('msg',
function () {
// 干了点事儿
},
{
deep: Boolean,
immediate: Boolean
}
)
// 当 model 发生改变时,为表单设置值
this.$watch('model', () => {
this.model && this.form.setFieldsValue(pick(this.model, fields))
})
// 当监听的数据的在初始不确定, 由多个数据得到时, 可以将第一个参数写成函数类型
vm.$watch(function () {
// 表达式 this.a + this.b 每次得出一个不同的结果时该函数都会被调用
// 这就像监听一个未被定义的计算属性
return this.a + this.b
}, /**参数和上面一致*/)
计算属性vs侦听器
计算属性擅长处理的是:多个数据影响一个数据。
侦听器擅长处理的是:一个数据影响多个数据。
计算属性的应用场景是计算的内容依赖多个属性,每次依赖项发生变化时,都会重新缓存结果。
在数据变化频率比较高,执行异步或者开销较大的操作时,适合使用侦听器。
在侦听器中可以执行异步,但是计算属性中不可以。
computed和watch的使用场景
侦听器详解