侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
一、vm.$watch()
vm.$watch( expOrFn, callback, [options] )
-
参数：
{string | Function} expOrFn{Function | Object} callback{Object} [options]{boolean} deep{boolean} immediate
-
返回值：
{Function} unwatch
vm.$watch()返回一个取消观察函数，用来停止触发回调
情况一：不使用immediate: true，在回调函数外使用unwatch()，回调函数一次都不会触发
情况二：不使用immediate: true，回调函数内使用unwatch()，回调函数只触发一次
情况三：使用immediate: true，在回调函数外使用unwatch()，回调函数被调用一次
情况四：使用immediate: true，并在回调函数内使用unwatch()，回调函数被调用两次
注意：immediate: true立即以表达式的当前结果触发回调，也就是回调函数会被执行两次，一次是vue实例化之后，一次是a发生变化
二、watch
-
类型：
{ [key: string]: string | Function | Object | Array }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function (val, oldVal) {
/* ... */
},
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 值是数组：如果监听的是非对象，会顺序执行数组中的每一个方法，如果监听的是对象，只会执行设置了deep：true的方法
e: [
'handle1',
function handle2 (val, oldVal) {
/* ... */
},
{
handler: function handle3 (val, oldVal) {
/* ... */
}, /* ... */
},
{
handler: function(val, oldval){
/*....*/
},
deep:true
},
{
handler: 'handler2'
}
],
// 可以直接监听对象的指定属性
'e.f': function (val, oldVal) { /* ... */ }
},
注意：除了deep外还有immediate，immediate：true立即以表达式的当前值触发回调（表示创建组件时回调函数执行一次，类似在created中调用函数，当监听的值发生变化时，回调函数会再次执行）
var vm = new Vue({
data:{
json:{
name:'kkkk',
age:212
}
},
methods:{
show(){
console.log(2)
}
},
watch:{
json:[
{
handler:'show',
deep:true,
immediate:true // vue实例创建后立马调用show（）
}
]
}
}).$mount('#box');
document.onclick = function() {
vm.json.age = 666
}
案例
created(){
this.fetchPostList()
},
watch: {
searchInputValue(){
this.fetchPostList()
}
}
可以优化为：
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}