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