vue中watch的使用写法
watch的使用写法大致两种:第一种:直接写一个监听处理函数,值是函数watch: {cityName(newName, oldName) {// 直接书写函数就能为对象添加属性方法,函数名将被用作方法名,这里不能用箭头函数,因为箭头函数是匿名函数// ...}}或watch: {cityName: 'nameChange'//nameChange是定义在methods里的函数名}或watch:
·
watch的使用写法大致两种:
第一种:直接写一个监听处理函数,值是函数
watch: {
cityName(newName, oldName) { // 直接书写函数就能为对象添加属性方法,函数名将被用作方法名,这里不能用箭头函数,因为箭头函数是匿名函数
// ...
}
}
或
watch: {
cityName: 'nameChange' //nameChange是定义在methods里的函数名
}
或
watch: {
cityName: function (newName, oldName) {
// ...
}
}
第二种:写一个对象,值是包括选项的对象
watch 的一个特点是,最初绑定的初始值是不会执行的,要等到 cityName 改变时才执行监听计算,如果我们想要让他最初绑定的初始值就执行监听计算,就需要用到immediate
watch: {
cityName: {
handler: function(newName, oldName) {
// ...
},
deep: false, // 默认值是 false,代表是否深度监听,值为true监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器
immediate: false, // 默认值是 false,用来控制初始值是否执行handler函数,值为true时初始值也执行handler函数,值为false时只有当cityName值发生变化时才执行handler函数。
}
}
或
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: false,
immediate: false,
}
}
或
watch: {
cityName: {
handler: 'nameChange', //nameChange是定义在methods里的函数名
deep: false,
immediate: false,
}
}
或
// 如果只想监听cityName.id的变化,可以这样写
watch: {
'cityName.id': {
handler: function(newName, oldName) {
// ...
},
deep: false,
immediate: false,
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)