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