vue中的watch侦听器

1、概念：

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

2、语法格式：

3、示例

3-1、

一个input输入框，然后双向绑定v-mdel

在输入框中输入内容，点开vue的调试工具（Devtools），data中的数据也随之改变，
直接在data中修改数据，input框中的内容也会相应改变

3-2、

定义watch侦听器，侦听username值的变化

只要在input框中输入内容，watch侦听器侦听到了username数据的变化则控制台打印出结果

注意：newVal 和 oldVal 的顺序不能错，newVal 在前面！

3-3、

需求：判断用户名是否被占用了

3-4、

优化：一进入页面watch侦听器就自动触发一次

结果：

注意：
1.方法格式的侦听器

• 缺点1:无法在刚进入页面的时候，自动触发。
• 缺点2:如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。

2.对象格式的侦听器

• 好处1:可以通过 immediate 选项，让侦听器自动触发。
• 好处2:可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化

首选方法格式的侦听器&#x