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,
    }
}

Logo

前往低代码交流专区

更多推荐