Vue之监听器的使用案例详解

第一种,用jquery的ajax发请求

B2745B16-4451-FBBB-93C4-DB77F6C07ABD.png

用户注册时,判断用户名不能重复,可以用到监听器。监听器,用watch,需要监听哪个值的变化,就把这个值,放在watch里面。

拿到新值,调用接口,去请求后端,判断用户名是否已存在。

6E539F41-134E-732F-1906-927D1B4723A4.png

此时,遇到的问题,用户刷新页面的时候,并不会触发监听器,只是在username值发生变化的时候,才会触发监听器,改进方法:将方法格式的侦听器改成对象格式的侦听器。

3A679221-61A8-506C-2A62-EFA8B18B066F.png

优先推荐方法格式的监听器(最简单),如果刷新进来就需要执行一次,就定义成对象的监听器。

当一个对象有多个属性的时候,我们必须用对象格式的监听,如果需求对象任意一个属性改变,都能触发监听器,就必须开启deep属性

D1326917-B2CD-A9F5-C14E-25FD5768E86F.png

当对象有多个属性,开启deep:true。

如果要监听的是对象的某个子属性变化,则用下面的写法:

A8E6065B-3495-7A4C-356D-052EF3C74C24.png

总结:

C89A0978-8EC9-EF24-40D8-DC3D29DC81B2.png

FE9CEA21-2FB7-19FC-C83B-80B8F71D2065.png

6614D7F6-C959-F170-54DC-EDA6A276F01A.png

703DB479-383B-B888-2914-7A61AE5CFE41.png

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的
为您推荐
    暂时没有数据