侦听对象 watch

Posted 2021-01-31

处理依赖，Vue还提供了另外一种处理依赖的方法：侦听对象。
再computed属性里面，我们设置需要计算的属性，而在函数里面设置计算这个属性的逻辑，侦听属性采用的则是另外一种机制，把想要侦听的属性名称设置为键，这里就是counter这个键，必须与属性名称相同，这里就是data属性中的counter属性，在函数中指定counter属性变化时需要执行的代码，Vue会自动把属性变化之后的数值传递给该函数，以允许我们对属性变化做出反应，所以这里我也可以通过设置一个全局输出变量来实现，有时可能确实得这样，比如属性不能像这里这样计算，然后再其它地方设置变量值，虽然这样做也可以，但是我会马上告诉你最佳方法还是尽量再允许的情况下多使用计算属性，因为这样做优化最好，比如使用缓存等等，通过减少不必要的任务，让Vue允许更快，尽管有时候你需要对每一次变化做出反应，另外一个计算属性不能实现的功能是，执行异步任务，计算属性必须同步执行，也就是说再compute的函数里面，必须立即返回一个返回值，中间不能访问服务器或者执行异步任务，如果需要执行异步任务，或者像前面一样，需要再属性更新时执行的代码，那就不能用计算属性来解决了。这时你就可以使用侦听对象。比如你打算两秒后充值counter属性值，再watch:counter里面增加一个setTimeout()方法，注意，因为这个函数再回调内的闭包里，所以必须再另外一个变量中存储Vue实例，this让我们可以方便第访问实例中的各个属性，但是它必须放在一个变量里，Vue实例的属性以及其它的数据，再Vue实例的默认对象和函数里面都可以通过this直接访问，但是再回调闭包里面则不行。

查看效果，改变counter值，但是两秒后被充值，因为设置了侦听对象，所以counter一变化就会调用函数，执行这部分代码就可以访问异步任务了。