watch监听

普通监听

watch: {
    userName (newName, oldName) {
        // 当userName改变时的处理逻辑
    }
}
注意：第一次不会执行，只有当值发生改变才会执行

立即执行

<input type="text" v-model="userName"/>  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true // 默认为false。设置为true代表立即执行
    }
}
注意：可代替@change事件,当请求列表时,可不在created或者mounted生命周期钩子里面调用方法

深度监听

<input type="text" v-model="cityName.name" />
data (){
    return {
        cityName: {name:'北京'}
    }
},
watch: {
    cityName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}
请注意，当对象嵌套较深时，深层监听可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。如下
watch: {
    'cityName.name': {
        handler(newName, oldName) {
            console.log(newName)
        },
    }
}

订阅多个变量突变

watch 不能一次监听多个变量，但我们可以将目标组合在一起作为一个新的 computed，并监视这个新的 "变量"。
computed: {
  multipleValues () {
    return {
      value1: this.value1,
      value2: this.value2,
    }
  }
},
watch: {
  multipleValues (val, oldVal) {
    console.log(val)
  }
}