侦听器是监测数据变化的,当数据变化的时候,我们可以做一些动作
目录
1 基本使用
2 获取当前值与之前的值
3 用户名是否被占用案例
4 侦听器的另一种写法
5 侦听器打开时就执行 immediate
6 深度侦听 deep
7 深度侦听指定变量
我们给input双向绑定username,然后搞一个watch,watch中使用变量名称作为函数名,当该变量变化的时候,会执行里面的内容
我们在input中输入一个1,发现内容被执行了
侦听器函数有两个形参,第一个是当前的值,第二个是之前的值
打开页面后我们输入123
判断应该是与请求的结果进行比较的,我这里就用数组替代了,这个最好是用lazy控制请求次数,每改动一次就请求后端可能撑不住
输入12时没反应
输入123后失去焦点之后显示用户名已被占用
打开后我们输入321
默认情况下,侦听器只有在数据变动的时候才会执行,比如我们当前给username一个初始值
我们可以看到admin在被占用的名单中,但是并没有显示右侧的提示
我们如果想让其打开的时候就触发,那么我们需要将侦听器改为对象写法,然后加入immediate属性,如果设置为true就一进入页面就触发,如果为false就只有改变的时候触发
打开之后发现提示显示出来了
在我们的数据是多级的时候,默认情况下,改变子级数据不会触发侦听器
加入deep并让deep为true可以在改变子级属性(包括所有子级)时触发侦听器
我们深度侦听拿到的值是一个对象,用的时候可能会麻烦一些
这样就可以了