1、methods
Vue绑定的数据变化时,会重新渲染页面,每次渲染时,method均会被调用
2、computed
computed具有缓存功能,页面渲染时,如果被依赖的数据没有变化,则使用缓存的值。如果数据有变化,则重新计算获取新的值。因此,如果要渲染的数据由多种数据计算组合而成,优先使用computed,以减少性能开销。
注意:不要在computed中对属性本身赋值,会无限递归导致出错
3、watch
watch可监听Vue所绑定的数据的变化
注意:不要在watch中对监听属性本身赋值,会无限递归导致出错
data() {
obj: {
a: 'a'
}
}
watch: {
obj(newVal, oldVal) {
// 数据变化执行的操作
}
}
其中有3个属性需要注意:
- handler:Function
- immediate: Boolean
- deep: Boolean
(1) handler函数
handler函数就是watch监听到数据变化后回调的函数,可在函数中处理数据变化后要执行的操作。
下面两种写法达到同样的效果:
// 写法一
watch: {
obj(newVal, oldVal) {
// 数据变化执行的操作
}
}
// 写法二
watch: {
obj: {
handler(newVal, oldVal){
// 数据变化执行的操作
}
}
}
(2) immediate
Vue中immediate默认为false,即数据首次绑定时,handler函数不会被回调。当immediate = true时,数据首次绑定会被回调
watch: {
obj: {
handler(newVal, oldVal){
// 数据变化执行的操作
},
immediate: true // 首次绑定,handler会被回调
}
}
(3) deep
Vue通过Object.defineProperty()为绑定的数据设置setter和getter方法,绑定是引用的,且无法监听对象属性的增加。因此,是有当引用改变时(即重新赋值时),watch才会被触发。
data() {
obj: {
a: 'a'
}
}
watch: {
obj(newVal, oldVal) {
// 数据变化执行的操作
}
}
mounted() {
// 无法触发watch
this.obj.a = 'A';
// 无法触发watch
this.obj.b = 'b';
}
实现监听对象内部变化,可以设置deep为true。当deep为true时,Vue会层层遍历对象的属性,以观察对象的内部变化。监听单个属性时,可使用字符串形式
// 监听整个对象
watch: {
obj: {
handler(newVal, oldVal){
// 数据变化执行的操作
},
deep: true
}
}
mounted() {
// 触发watch
this.obj.a = 'A';
// 触发watch
this.obj.b = 'b';
}
// 监听对象的单个属性
watch: {
'obj.a': {
handler(newVal, oldVal){
// 数据变化执行的操作
},
}
}