1.计算属性
初衷:为了解决模块里面有太多的计算逻辑让模版难以维护。
计算属性可以依赖一个数据也可以依赖多个数据的变化
使用场景:
商品单价和数量改变时,商品总价更改。如果写在方法里面,那么每次修改商品单价和数量时都会去调用这个方法,这种每次去调用都会消耗一部分性能,对页面渲染并不友好。所以就可以使用计算属性,计算属性可以使用缓存
2.计算属性的setter
计算属性不能在外部直接进行赋值,如果想要给计算属性赋值,就需要使用set/get方法,而且计算属性里面使用对象写法。
如购物车里面商品,全选按钮会根据商品是否全选中来决定是否被选中
<el-checkbox size="mini" v-model="checkedAll"></el-checkbox>
checkedAll: {
get() {
return this.cartProducts.every(item => item.isChecked);
},
set(newVal) {
this.cartProducts.map(item => (item.isChecked = newVal));
}
}
3.计算属性的特性
1. 计算属性会被加入到vue实例
2. 计算属性所依赖的数据未发生变化,结果会被缓存(缓存依赖于数据的变化,数据没有变化不会缓存),下一次页面更新时首先会查看数据是否变化,如果没有变化不会触发computed函数会直接读取缓存的内容
4.watch监听器
监听器适用于数据发生改变时做一些副作用相关的处理
5.watch相关api
- 可以监听data数据中的变量;
- 监听属性的方法,可以是methods里的方法名;
- 可以使用deep:true对对象进行深度监听
- 可以使用immediate: true在页面首次加载时就触发
- 可以传入回调数组,它们会被按顺序逐一调用
- 可以只监听对象的某个属性 obj.a
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深(对对象的深度监听)
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用(页面加载时就触发)
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被按顺序逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}(只监听对象的某个属性)
'e.f': function (val, oldVal) { /* ... */ }
},
methods:{
someMethod(){
console.log("methods方法中监听");
}
}
})
vm.a = 2 // => new: 2, old: 1
6.watch可以处理异步
watch内部可以处理异步相关逻辑
7.计算属性computed和监听watch的区别
- 计算属性会进行缓存,缓存是由数据变化决定。在页面下一次更新时,首先会查看里面的字段是否有变化,如果字段没有变化,则不会触发会computed函数从上一次缓存中读取数据;而watch不会进行缓存;
- 计算属性computed因为有return所以不能处理异步相关逻辑;而watch可以处理异步相关逻辑
- computed首次加载就会触发缓存里面的内容,但是watch如果要首次加载就触发需要使用immediate:true属性;
- computed会对对象进行深度监听,但是如果watch想进行深度监听需要使用deep:true属性