侦听器

Guitar大约 2 分钟

侦听器可以监听属性的变化，从而给出用户的响应式。侦听器容易被滥用，有时使用计算属性是更好的选择。

当需要在数据变化时执行异步或开销较大的操作时，使用侦听器是最有用的。

watch 配置项

watch 配置项可以配置属性的监听器，每当这个属性的值发生变化时，就会执行一次监听器代码。

watch : {
	// 可以监视多个属性，既可以是原有属性，也可以是计算属性。
    // 多级结构的子属性也可以监视，如 "a.b" : {...}
    属性名 : { 配置项 },
    "属性名" : { 配置项 },
    ...
}

// 配置项详解：
immediate : true, // 初始化时执行一次 handler
// 属性值发生变化时，执行这个函数
// 建议使用传统函数，this指向当前vm，注意递归问题
handler : function(newValue, oldValue){
    ...
},
deep : true  // 启用深度监视，默认值为false。
// 当需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视。会将handler作为所有属性的监听执行

// 当只有handler回调函数的时候，可以使用简写形式。
属性名(newValue, oldValue){
    ...
}
// 等价于
属性名: {
    handler(newValue, oldValue){
        ...
    }
}

深度监视

监视多级结构中某个属性的变化，'a.b.c' : {} 。
添加深度监视来完成：deep : true。

后期添加监视

调用API，使用 $watch 方法，手动添加监视。

vm.$watch('被监视的属性名', { 配置项 })

// 简写形式
vm.$watch('被监视的属性名', handler)

不建议使用箭头函数

计算属性和侦听器

计算属性和侦听器都能完成时，优先选择计算属性。
如果需要采用异步的方式，则只能使用侦听器。因为 computed 依靠 return，watch 不需要。

什么时候使用箭头函数？什么时候使用普通函数？

看看这个函数是否属于Vue管理的：
是Vue管理的函数：统一写普通函数。
不是Vue管理的函数（例如 setTimeout 的回调函数、Promise 的回调函数、AJAX 的回调函数）：统一写箭头函数。