一个值的改变，会影响多个值(或处理多件事) ,使用侦听器。( 为了观察一个值)
多个值的改变，为了得到一个结果，使用计算属性。(为了得到-一个值)
实际开发中,大部分问题都可以用computed解决。 

在使用watch监听的时候，我们监听数组和对象并且进行深度监听的时候 要使用的 handler函数,并且需要添加deep:true属性 

deep:true 表示开启深度监听

immediate:true 表示立即进行监听（因为watch监听，当监听的值没有发生变化的时候，它是不会监听的，如果想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true）

监听的三种用法：

<input type="text" v-model="userName"/>  
//监听   当userName值发生变化时触发
watch: {
    userName (newName, oldName) {
        console.log(newName)
    }
}

<input type="text" v-model="userName"/>  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true //立即进行监听
    }
}

<input type="text" v-model="cityName.name" />
data (){
    return {
        cityName: {name:'北京'}
    }
},
watch: {
    cityName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true  //监听对象或数组的时候，要用到深度监听
    }
}