watch的immediate和deep
2019-04-03 本文已影响0人
理想休想幻想
基本类型包括Number、String、Boolean、Null、Undefined
引用类型为Object type,如Object、Array、Function、Data
场景:对基本类型和引用类型的监听,以及immediate与deep的区别使用
废话:在入坑vue后对watch的使用不怎么熟练,经常不知道怎么使用,在入坑前端几年后,先对watch做个区别,仅限个人经验总结,欢迎指点。
immediate:初始绑定加载时就进行监听
deep:一般使用于对引用类型的监听,深度监听,如监听一个Object,只要Object里面的任何一个字段发生变化都会被监听,但是比较消耗性能,根据需求使用,能不用则不用。
监听路由(引用类型)
export default {
name: 'App',
data() {
return {
name: 'xxx',
obj: {
a: 1
}
}
},
watch: {
/* 1 监听基本类型变化,初始加载不会被立即监听*/
name() {
console.log(this.name)
}
/*2 监听基本类型变化 初始加载时就进行监听*/
name: {
handler(newV) {
// do something
},
immediate: true
}
/*3 深度监听引用类型 obj中任何一个数据发生改变都会被监听*/
obj: {
handler(newV) {
//do something
},
deep: true // 深度监听
}
/* 4 深度监听引用类型中某个属性*/
'obj.a': {
handler(newV) {
// do something
},
deep: true, // 深度监听
immediate: true // 初始绑定时就立即监听
}
/** 5 监听引用类型的某个类型。监听当前路由的name(路由配置中路由需配置一个name)
*/
'$route.name': {
immediate: true,
handler(newV, oldV) {
// do something
)
}
}
}
}