Vue监听器watch补充 - 异步操作实践

5,181 阅读1分钟

监听器watch

监听器是什么?

  export default中有一个watch属性专门用于监听data中数据变化,这就是我们所说的监听器。

如何实现监听?

  watch中的方法只要与被绑定的数据同名则能与该数据实现绑定。

  以上装置的输入域与data中的数据进行了双向绑定,data中的数据又与watch监听器中的同名方法进行了绑定,因而输出的结果fullnanme会随输入域输入内容的变化而变化。

  同样的功能用计算属性computed也能实现。

监听器的应用场景

  处理一些异步的(如AJAX,定时器等)或者性能开销较大的操作。

  下面来写一个异步的需求实践一下,验证用户名是否已存在。

  Points:   ①输入域中输入用户名;   ②失去焦点时验证用户名是否已存在;   ③如果用户名已存在,提示重新输入;   ③如果用户名不存在,提示用户名可用。

  Steps:   ①v-model双向绑定输入域从而获得输入域数据;

  ②提示信息数据绑定;

  ③watch监听输入域数据变化并触发用户名检索;

  ④v-model修饰符修改事件触发的时机使时间在失去焦点时触发。